<!DOCTYPE html>
<!-- saved from url=(0079)http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ -->
<html class="js svg inlinesvg svgclippaths translated-ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Essential jQuery Plugin Patterns | Smashing Coding</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta charset="UTF-8">

    <!-- Win8 Tile -->
    <meta name="msapplication-TileImage" content="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/smashing-windows-icon-144-144.png"><meta name="msapplication-TileColor" content="#e63b2c">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon-precomposed" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-57x57-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/apple-touch-icon-144x144-precomposed.png">

    <!-- RSS & Pingback -->
    <link rel="alternate" type="application/atom+xml" title="News-Feed" href="http://rss1.smashingmagazine.com/feed/"><link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Coding Feed" href="http://rss1.smashingmagazine.com/feed/?f=coding-std"><link rel="pingback" href="http://coding.smashingmagazine.com/xmlrpc.php">

    <!-- Favicon -->
    <link rel="shortcut icon" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/images/favicon.ico">
    
    <script src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/1125.js" async="" type="text/javascript"></script><script type="text/javascript">var globals = {"wp_home":"http:\/\/mobile.smashingmagazine.com","wp_theme_url":"http:\/\/media.smashingmagazine.com\/wp-content\/themes\/smashingv4","wp_media_uploads_url":"http:\/\/media.smashingmagazine.com\/wp-content\/uploads","wp_www_smash_url":"http:\/\/www.smashingmagazine.com"};</script>

    
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.2 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="jQuery plugin patterns you have to know about. This post is targeted at intermediate to advanced developers.  If you don’t feel you’re ready for this just yet, I’m happy to recommend the official jQuery Plugins/Authoring guide">
<meta name="keywords" content="jQuery, programming, patterns, plugins">
<link rel="canonical" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/translator Essential jQuery Plugin Patterns   Smashing Coding.htm">
<!-- / Yoast WordPress SEO plugin. -->

<link type="application/atom+xml" rel="alternate" title="Smashing Magazine » Feed" href="http://rss1.smashingmagazine.com/feed/">


<link rel="stylesheet" id="fontdeck-css" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/12777.css" type="text/css" media="screen, print">
<link rel="stylesheet" id="main-css" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/main.min.css" type="text/css" media="all">
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/jquery.js"></script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/popover-load-js.php"></script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/thirdparty.min.js"></script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/comment-reply.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpAjax = {"noPerm":"You do not have permission to do that.","broken":"An unidentified error has occurred."};
/* ]]> */
</script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/wp-ajax-response.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var thickboxL10n = {"next":"Next >","prev":"< Prev","image":"Image","of":"of","close":"Close","noiframes":"This feature requires inline frames. You have iframes disabled or your browser does not support them.","loadingAnimation":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/loadingAnimation.gif","closeImage":"http:\/\/coding.smashingmagazine.com\/wp-includes\/js\/thickbox\/tb-close.png"};
/* ]]> */
</script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/thickbox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wpajaxeditcomments = {"AEC_PluginUrl":"http:\/\/coding.smashingmagazine.com\/wp-content\/plugins\/smash-edit-comments","AEC_CanScroll":"0","AEC_Minutes":"minutes","AEC_Minute":"minute","AEC_And":"and","AEC_Seconds":"seconds","AEC_Second":"second","AEC_Moderation":"Mark for Moderation?","AEC_Approve":"Approve Comment?","AEC_Spam":"Mark as Spam?","AEC_Delete":"Delete this comment?","AEC_Anon":"Anonymous","AEC_Loading":"Loading...","AEC_Ready":"Ready","AEC_Sending":"Sending...","AEC_Sent":"Message Sent","AEC_LoadSuccessful":"Comment Loaded Successfully","AEC_Saving":"Saving...","AEC_Saved":"Comment Successfully Saved","AEC_Delink":"De-link Successful"};
/* ]]> */
</script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/wp-ajax-edit-comments.js"></script>

<link rel="shortlink" href="http://coding.smashingmagazine.com/?p=115389">
<link rel="stylesheet" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/edit-comments.css" type="text/css" media="screen"><!-- Ajax Edit Comments -->
<!--[if IE]>
<style>
  .clearfix {display: inline-block;}
  /* Hides from IE-mac \*/
  * html .clearfix {height: 1%;}
  .clearfix {display: block;}
  /* End hide from IE-mac */
</style>
<![endif]-->
<link rel="stylesheet" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/thickbox.css" type="text/css" media="all">
    <!--[if IE 8]><link rel="stylesheet" href="http://coding.smashingmagazine.com/wp-content/themes/smashingv4/stylesheets/ie8.css" /><![endif]-->

    <script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/spcjs.php"></script><script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/spc.php"></script><script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/fl.js"></script>

    <script type="text/javascript">/* <![CDATA[ */  ads_postload();   /* ]]> */</script>

<script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in.php"></script><style type="text/css">undefined</style><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(1).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(2).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(3).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(4).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(5).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(6).php"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(7).php"></script><link type="text/css" rel="stylesheet" charset="UTF-8" href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/translateelement.css"><script type="text/javascript" charset="UTF-8" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/main_pt-BR.js"></script><script type="text/javascript" charset="UTF-8" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/element_main.js"></script><script type="text/javascript" async="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/in(8).php"></script></head>
<body class="single single-post postid-115389 single-format-standard coding-section">

	<a id="top"></a>
        <nav class="toplevel clearfix">
            <div class="mini">
                <h1><span class="screen-reader">Smashing Magazine</span><a href="http://www.smashingmagazine.com/" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></h1>
            </div>

            <div class="mobile-nav-buttons">
                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#mobile-navigation" class="nav-toggle-button">Menu</a> <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#mobile-search" class="search-toggle-button">Search</a>
            </div>

            <div class="searching-on-mobile-device" id="mobile-search">

                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="close-that-search">×</a>

                <form id="searching" class="search-for-mobile" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
                    <div class="clearfix">
                        <input name="q" id="mobile-search-input" type="text" placeholder="e.g. CSS">
                        <button class="search_submit" type="submit">Search</button>
                        <input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
                        <input type="hidden" name="cof" value="FORID:10">
                        <input type="hidden" name="ie" value="UTF-8">
                    </div>
                </form>

            </div> <!-- Search form -->

            <div class="toggle-nav" id="mobile-navigation">

                <a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="close-that-nav">×</a>

                <ul class="mobile-nav-ul">
                    <li class="mobile-nav-heading">Smashing Pages:</li>
                    <li><a href="http://www.smashingmagazine.com/books/">Smashing Books</a></li>
                    <li><a href="http://www.smashingmagazine.com/ebooks/">Smashing Library</a></li>
                    <li><a href="https://shop.smashingmagazine.com/workshops/">Smashing Events</a></li>
                    <li><a href="http://jobs.smashingmagazine.com/">Job Board</a></li>
                </ul>
                <ul class="mobile-nav-ul">
                    <li class="mobile-nav-heading">Categories:</li>
                    <li><a href="http://coding.smashingmagazine.com/">Coding</a></li>
                    <li><a href="http://www.smashingmagazine.com/category/design/">Design</a></li>
                    <li><a href="http://mobile.smashingmagazine.com/">Mobile</a></li>
                    <li><a href="http://www.smashingmagazine.com/category/graphics/">Graphics</a></li>
                    <li><a href="http://uxdesign.smashingmagazine.com/">UX Design</a></li>
                    <li><a href="http://wp.smashingmagazine.com/">WordPress</a></li>
                </ul>
            </div> <!-- Mobile Nav uls -->

            <ul class="network clearfix">           
                <li class="current"><a href="http://www.smashingmagazine.com/" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></li>
                <li><a href="http://www.smashingmagazine.com/books/"><font><font>Livros</font></font></a></li>
                <li><a href="http://www.smashingmagazine.com/ebooks/"><font><font>Biblioteca</font></font></a><a href="http://www.smashingmagazine.com/ebooks/" id="naviebookslink" style="border: none;"><img id="littleebooksimage" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/navilittlebook.png" alt="Smashing Library"></a></li>
                <li><a href="https://shop.smashingmagazine.com/workshops/"><font><font>Workshops</font></font></a></li>
                <li><a href="http://jobs.smashingmagazine.com/"><font><font>Job Board</font></font></a></li>
            </ul>

            <ul class="channels">
                <li class="rss"><a href="http://rss1.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (1100K)"><font><font>RSS</font></font></a></li>
                <li class="facebook"><a href="http://www.facebook.com/smashmag" title="Join our Facebook page! (99k)"><font><font>Facebook</font></font></a></li>
                <li class="twitter"><a href="http://twitter.com/smashingmag" title="Follow us on Twitter! (612K)"><font><font>Chilro</font></font></a></li>
                <li class="newsletter"><a href="http://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (107K)"><font><font>Boletim informativo</font></font></a></li>
            </ul>
        </nav>

<div id="container">
    <div class="fluid clearfix">
        <div class="grid clearfix">
            <div class="mini-search wp-search-form clearfix">           
                <form id="search" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
                    <input name="q" type="text" placeholder="e.g. JavaScript">
                    <button class="search_submit" type="submit"><span class="first-type">Search</span></button>
                    <input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
                    <input type="hidden" name="cof" value="FORID:10">
                    <input type="hidden" name="ie" value="UTF-8">
                </form>
            </div>
            <div class="col sidebar">
                <nav class="sections">
                <ul class="clearfix">
                    <li class="coding current">
                        <a href="http://coding.smashingmagazine.com/"><font><font>Codificação</font></font></a>
                        <ul>
                            <li><a href="http://coding.smashingmagazine.com/tag/css/"><font><font>CSS</font></font></a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/html/"><font><font>HTML</font></font></a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/javascript/"><font><font>JavaScript</font></font></a></li>
                            <li><a href="http://coding.smashingmagazine.com/tag/techniques/"><font><font>Técnicas</font></font></a></li>
                        </ul>
                    </li>
                    <li class="design">
                        <a href="http://www.smashingmagazine.com/category/design/"><font><font>Projeto</font></font></a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/web-design/"><font><font>Web Design</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/typography/"><font><font>Tipografia</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/inspiration/"><font><font>Inspiração</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/business/"><font><font>Negócio</font></font></a></li>
                        </ul>
                    </li>
                    <li class="community">
                        <a href="http://mobile.smashingmagazine.com/"><font><font>Móvel</font></font></a>
                        <ul>
                            <li><a href="http://mobile.smashingmagazine.com/tag/responsive-design/"><font><font>Responsivo</font></font></a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/ios/"><font><font>iPhone &amp; iPad</font></font></a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/android/"><font><font>Andróide</font></font></a></li>
                            <li><a href="http://mobile.smashingmagazine.com/tag/design-patterns/"><font><font>Design Patterns</font></font></a></li>
                        </ul>
                    </li>
                    <li class="graphics">
                        <a href="http://www.smashingmagazine.com/category/graphics/"><font><font>Gráficos</font></font></a>
                        <ul>
                            <li><a href="http://www.smashingmagazine.com/tag/photoshop/"><font><font>Photoshop</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/illustrator/"><font><font>Illustrator</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/wallpapers/"><font><font>Wallpapers</font></font></a></li>
                            <li><a href="http://www.smashingmagazine.com/tag/freebies/"><font><font>Freebies</font></font></a></li>
                        </ul>
                    </li>
                    <li class="ux">
                        <a href="http://uxdesign.smashingmagazine.com/"><font><font>UX design</font></font></a>
                        <ul>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/usability/"><font><font>Usabilidade</font></font></a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/user-experience/"><font><font>Experiência do Usuário</font></font></a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/ui/"><font><font>UI design</font></font></a></li>
                            <li><a href="http://uxdesign.smashingmagazine.com/tag/e-commerce/"><font><font>E-Commerce</font></font></a></li>
                        </ul>
                    </li>
                    <li class="wordpress">
                        <a href="http://wp.smashingmagazine.com/" class="clearfix"><span class="short">WP</span><span class="long"><span><font><font>Palavra </font></font></span><span><font><font>de Imprensa</font></font></span></span></a>
                        <ul>
                            <li><a href="http://wp.smashingmagazine.com/tag/essentials/"><font><font>Essentials</font></font></a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/techniques/"><font><font>Técnicas</font></font></a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/plugins/"><font><font>Plugins</font></font></a></li>
                            <li><a href="http://wp.smashingmagazine.com/tag/themes/"><font><font>Temas</font></font></a></li>
                        </ul>
                    </li>
                </ul>
                <br class="nasty">
            </nav>
        </div><!-- .col.sidebar -->
        <div class="col main single">
    <article class="post-115389 post type-post status-publish format-standard hentry category-jquery tag-jquery post">
                    <h2><a href="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/translator Essential jQuery Plugin Patterns   Smashing Coding.htm" rel="bookmark" title="Read &#39;Essential jQuery Plugin Patterns&#39;"><font><font>JQuery essenciais Padrões Plugin</font></font></a></h2>
                <ul class="postmetadata clearfix">
            <li class="author"><font><font>Por </font></font><a rel="author" href="http://coding.smashingmagazine.com/author/addy-osmani/?rel=author" title="Posts by Addy Osmani"><font><font>Addy Osmani</font></font></a><sup class="print_only"> 1</sup></li>
            <li id="logoedtarget" class="inline"></li>            <li class="date"><font><font>11 de outubro de 2011</font></font></li>
            <li class="tags"><a href="http://coding.smashingmagazine.com/tag/jquery/"><font><font>JQuery</font></font></a><sup class="print_only"> 2</sup></li>
            <li class="comments"><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comments" title="Comment on Essential jQuery Plugin Patterns"><font><font>51 comentários</font></font></a></li>
                    </ul>
                <div class="ad ed">
            <span class="declare"><font><font>Anúncio</font></font></span>
            <div id="cad">
                <script type="text/javascript">// <![CDATA[
                    OA_show('Medium Rectangle');
                // ]]> </script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5987__zoneid=22__OXLCA=1__cb=a25ba95d4d__oadest=http%3A%2F%2Fwww.infragistics.com%2Figniteui-download%3Futm_source%3DSmashing%2B%26utm_medium%3Dbanner%26utm_content%3D300x250%26utm_campaign%3Djquery" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai.php" alt="" title="" border="0"></a><div id="beacon_a25ba95d4d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg.php" alt="" style="width: 0px; height: 0px;"></div>

            </div>
        </div>
                                    <p><font><font>Eu ocasionalmente escrever sobre a implementação de </font></font><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/"><font><font>padrões de projeto</font></font></a><font><font> em JavaScript. </font><font>Eles são uma excelente maneira de construir sobre abordagens comprovadas para resolver problemas comuns de desenvolvimento, e eu acho que há uma série de benefícios para usá-los. </font><font>Mas, enquanto os padrões de JavaScript conhecidos são úteis, o outro lado do desenvolvimento poderiam se beneficiar de seu próprio conjunto de padrões de projeto: plugins jQuery. </font><font>O jQuery oficial </font></font><a href="http://docs.jquery.com/Plugins/Authoring"><font><font>guia de autoria do plugin</font></font></a><font><font> oferece um excelente ponto de partida para começar a escrever plugins e widgets, mas vamos levá-lo ainda mais.</font></font></p>
<p><font><font>Desenvolvimento Plugin tem evoluído ao longo dos últimos anos. </font><font>Não temos mais apenas uma maneira de escrever plugins, mas muitos. </font><font>Na realidade, certos padrões podem funcionar melhor para um determinado problema ou componente que outros.</font></font></p>
<p><font><font>Alguns desenvolvedores podem querer utilizar o jQuery UI </font></font><a href="http://ajpiano.com/widgetfactory/"><font><font>fábrica Widget</font></font></a><font><font> , é ótimo para, componentes de interface do usuário flexíveis complexas. </font><font>Alguns não podem. </font><font>Alguns podem gostar de estruturar seus plugins mais como módulos (semelhante ao padrão módulo) ou usar um formato de módulo mais formal, como </font></font><a href="https://github.com/amdjs/amdjs-api/wiki/AMD"><font><font>AMD (definição de módulo assíncrono)</font></font></a><font><font> . </font><font>Alguns podem querer os seus plugins para aproveitar o poder da herança prototípica. </font><font>Alguns podem querer usar eventos personalizados ou pub / sub para comunicar a partir de plugins para o resto de sua aplicação. </font><font>E assim por diante.</font></font></p>
<p><font><font>Comecei a pensar sobre os padrões de plugins, depois de perceber uma série de esforços para criar um one-size-fits-all clichê plugin jQuery. </font><font>Enquanto tal clichê é uma ótima idéia na teoria, a realidade é que raramente escrever plugins de uma forma fixa, usando um único padrão o tempo todo.</font></font></p>
<p><font><font>Vamos supor que você já tentou sua mão em escrever seus próprios plugins jQuery em algum momento e você está confortável montar algo que funcione. </font><font>É funcional. </font><font>Ele faz o que precisa fazer, mas talvez você sente que poderia ser melhor estruturado. </font><font>Talvez poderia ser mais flexível ou poderia resolver mais problemas. </font><font>Se isso soa familiar e você não tem certeza das diferenças entre muitos dos diferentes padrões plugin jQuery, então você pode encontrar o que eu tenho a dizer útil.</font></font></p>
<p><font><font>Meu conselho não vai fornecer soluções para cada padrão possível, mas irá abranger padrões populares que os desenvolvedores usam na natureza.</font></font></p>
<p><strong><font><font>Nota:</font></font></strong><font><font> Este post é direcionado a intermediária para desenvolvedores avançados. </font><font>Se você não sente que está pronto para isso ainda, eu estou feliz em recomendar os oficiais jQuery </font></font><a href="http://docs.jquery.com/Plugins/Authoring"><font><font>Plugins / Criação</font></font></a><font><font> de guia, de Ben Alman </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759"><font><font>guia de estilo plug-in</font></font></a><font><font> e de Remy afiados " </font></font><a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/"><font><font>Sinais de um plugin jQuery mal escrito</font></font></a><font><font> . "</font></font></p>
<h3><font><font>Padrões</font></font></h3>
<p><font><font>plugins jQuery têm muito poucas regras definidas, que uma das razões para a incrível diversidade na forma como elas são implementadas. </font><font>No nível mais básico, você pode escrever um plugin simplesmente adicionando uma nova propriedade função do jQuery </font></font><code><font><font>$ fn.</font></font></code><font><font> objeto, como segue:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><font><font>$ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myPluginName </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / sua lógica do plugin
 </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>Isso é ótimo para compactação, mas a seguir seria uma base melhor para construir:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
  $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myPluginName </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / sua lógica do plugin
 </font></font></span>  <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>Aqui, nós envolto nossa lógica plug-in em uma função anônima. </font><font>Para garantir que o uso do </font></font><code><font><font>$</font></font></code><font><font> sinal como um atalho não cria conflitos entre jQuery e outras bibliotecas JavaScript, nós simplesmente passá-lo para este encerramento, que mapeia para o cifrão, garantindo assim que não pode ser afetada por qualquer coisa fora do seu âmbito de execução.</font></font></p>
<p><font><font>Uma forma alternativa de escrever esse padrão seria a utilização de </font></font><code><font><font>$ extend.</font></font></code><font><font> , o que lhe permite definir várias funções ao mesmo tempo e que, por vezes, faz mais sentido semanticamente:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
    $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estender </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        MyPlugin </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / sua lógica plug-in
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>Poderíamos fazer muito mais para melhorar em tudo isso, eo primeiro padrão completo estaremos olhando hoje, o padrão leve, cobre algumas das melhores práticas que podemos utilizar para o desenvolvimento básico plugin de todos os dias e que leva em conta as dicas comuns para olhar para fora.</font></font></p>
<h4><font><font>Algumas Notas Rápidas</font></font></h4>
<p><font><font>Você pode encontrar todos os padrões a partir deste post neste </font></font><a href="https://github.com/addyosmani/jquery-plugin-patterns/"><font><font>repositório GitHub</font></font></a><font><font> .</font></font></p>
<p><font><font>Enquanto a maioria dos padrões abaixo será explicado, eu recomendo a leitura através dos comentários no código, porque eles vão oferecer mais detalhes sobre por que certas práticas são as melhores. </font></font></p>
<p><font><font>Gostaria também de mencionar que nada disso seria possível sem o trabalho anterior, informações e conselhos de outros membros da comunidade jQuery. </font><font>Eu listei-los em linha com cada padrão de modo que você pode ler-se no seu trabalho individual se interessado.</font></font></p>
<h3><font><font>A Start Leve</font></font></h3>
<p><font><font>Vamos começar o nosso olhar para padrões com algo básico que segue as melhores práticas (incluindo aqueles na guia plugin-autoria jQuery). </font><font>Este modelo é ideal para desenvolvedores que são novos para o desenvolvimento de plug-in ou que apenas querem conseguir algo simples (como um plugin de utilidade). </font><font>Este início leve usa o seguinte:</font></font></p>
<ul>
<li><font><font>Melhores práticas comuns, como um ponto e vírgula antes de invocação da função; </font></font><code><font><font>janela, documentos, indefinido</font></font></code><font><font> passado como argumentos, e aderência às diretrizes jQuery estilo do núcleo.</font></font></li>
<li><font><font>Um objeto de defaults básico.</font></font></li>
<li><font><font>Um construtor simples plugin para a lógica relacionada com a criação inicial ea atribuição do elemento a trabalhar.</font></font></li>
<li><font><font>Ampliando as opções com defaults.</font></font></li>
<li><font><font>Um wrapper leve ao redor do construtor, o que ajuda a evitar problemas como várias instâncias.</font></font></li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery leve clichê do plugin</font></font><font></font><font><font>
 * Autor Original: @ ajpiano</font></font><font></font><font><font>
 * Outras alterações, comentários: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / O ponto e vírgula antes da chamada de função é uma segurança </font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Net contra os scripts concatenadas e / ou outros plugins 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / que não são fechados adequadamente.
 </font></font></span><span class="token punctuation"><font><font>; </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
    <font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Indefinido é usado aqui como o mundial indefinido 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / variável em ECMAScript 3 e é mutável (isto é, pode 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / ser alterado por outra pessoa). </font><font>indefinido não é realmente 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / sendo passado para que possamos garantir que seu valor é 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / verdadeiramente indefinido. </font><font>Em ES5, indefinido já não pode ser 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / modificado.
 </font></font></span>    
   <span class="token comment" spellcheck="true"><font><font>/ / janela e documento são passados ​​através de locais 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / variáveis ​​em vez de globals, porque isso (um pouco) 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / acelera o processo de resolução e pode ser mais 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / eficiente minificado ( especialmente quando ambos são 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>. / / regularmente referenciado no seu plugin)
 </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / Cria os padrões uma vez
 </font></font></span>    <span class="token keyword"><font><font>var</font></font></span><font><font> pluginName </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token string"><font><font>'defaultPluginName' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> 
        defaults </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            propertyName </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token string"><font><font>"valor" </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / O real plugin do construtor
 </font></font></span>    <span class="token keyword"><font><font>função </font></font></span> <span class="token function"><font><font>Plugin </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> elemento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> elemento </font></font><span class="token operator"><font><font>=</font></font></span><font><font> elemento </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / JQuery tem um método que mescla as estender 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / conteúdo de dois ou mais objetos, armazenando o 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / resultado no primeiro objeto. </font><font>O primeiro objeto 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / geralmente é vazio, porque não queremos alterar 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / as opções padrão para futuros casos do plugin
</font></font></span><font><font>         esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estendem </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token punctuation"><font><font> { </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> defaults </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>;</font></font></span><font></font>
        <font></font><font><font>
        este </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> _defaults </font></font><span class="token operator"><font><font>=</font></font></span><font><font> defaults </font></font><span class="token punctuation"><font><font>;</font></font></span><font><font> 
        este </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> _name </font></font><span class="token operator"><font><font>=</font></font></span><font><font> pluginname </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
        <font></font><font><font>
        este </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>inicialização </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font><font><font>
    Plugin </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> inicialização </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
       <span class="token comment" spellcheck="true"><font><font>/ / Colocar lógica de inicialização aqui
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / Você já tem acesso ao elemento DOM e
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / as opções através da instância, por exemplo, this.element 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / e this.options
 </font></font></span>    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / A capa do plugin muito leve ao redor do construtor 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / prevenção contra múltipla
</font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token operator"><font></font></span> <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
        <span class="token keyword"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
            <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><font></font><span class="token punctuation"><font></font></span> <span class="token string"><font></font></span> <span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><font></font><span class="token punctuation"><font></font></span> <span class="token string"><font></font></span> <span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span> 
                <span class="token keyword"><font></font></span> <span class="token class-name"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
            <span class="token punctuation"><font></font></span>
        <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
    <span class="token punctuation"><font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><a href="http://docs.jquery.com/Plugins/Authoring"><font><font>Plugins / Authoring</font></font></a><sup class="print_only"> 3</sup><font><font> , jQuery</font></font></li>
<li><font><font>" </font></font><a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/"><font><font>Sinais de um plugin jQuery mal escrito</font></font></a><sup class="print_only"> 4</sup><font><font> ", Remy da Sharp</font></font></li>
<li><font><font>" </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff608209"><font><font>Como criar sua própria jQuery Plugin</font></font></a><sup class="print_only"> 5</sup><font><font> ", Elijah Manor</font></font></li>
<li><font><font>" </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759"><font><font>Estilo em plugins jQuery e porquê</font></font></a><sup class="print_only"> 6</sup><font><font> ", Ben Almon</font></font></li>
<li><font><font>" </font></font><a href="http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/"><font><font>Criar o seu primeiro Plugin jQuery, Parte 2</font></font></a><sup class="print_only"> 7</sup><font><font> ", Andrew Wirick</font></font></li>
</ul>
<h3><font><font>"Complete" Widget Factory</font></font></h3>
<p><font><font>Enquanto o guia de criação é uma ótima introdução ao desenvolvimento de plugins, ele não oferece um grande número de conveniências para ocultar longe de tarefas de canalização comuns que temos de lidar com uma base regular.</font></font></p>
<p><font><font>O jQuery UI Widget Factory é uma solução para este problema que ajuda a construir complexos, plugins com estado com base em princípios orientados a objeto. </font><font>Ele também facilita a comunicação com o exemplo de seu plugin, ofuscando um número de tarefas repetitivas que você teria para codificar quando se trabalha com plugins básicos.</font></font></p>
<p><font><font>No caso de você não se deparar com estes antes, plugins com estado acompanhar o seu estado atual, também permitindo que você altere as propriedades do plugin depois que ele foi inicializado.</font></font></p>
<p><font><font>Uma das grandes coisas sobre o Widget Factory é que a maioria da biblioteca jQuery UI realmente usa-lo como base para seus componentes. </font><font>Isto significa que se você está procurando mais orientação sobre a estrutura além deste modelo, você não terá que olhar para além do repositório jQuery UI.</font></font></p>
<p><font><font>Voltar aos padrões. </font><font>Este clichê jQuery UI faz o seguinte:</font></font></p>
<ul>
<li><font><font>Abrange quase todos os métodos padrão suportados, incluindo fatos geradores.</font></font></li>
<li><font><font>Inclui comentários para todos os métodos utilizados, de modo que você nunca tem certeza de onde a lógica deve caber no seu plugin.</font></font></li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery UI Widget da fábrica clichê plugin (para 1,8 / 9 +)</font></font><font></font><font><font>
 * Autor: @ addyosmani</font></font><font></font><font><font>
 * Outras mudanças: @ peolanha</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<font></font>
<span class="token punctuation"><font><font>, </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Define o seu widget com um namespace de sua escolha
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / com parâmetros adicionais, por exemplo, 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / $ widget ("namespace.widgetname" (opcional) -. um 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>protótipo widget / / existente para herdar, um objeto 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / literal para tornar-se protótipo do widget); 
</font></font></span><font><font> 
    $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Widget </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "namespace.widgetname" </font></font></span> <span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Opções a serem usadas como padrões
</font></font></span><font><font>         opções </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            someValue </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>nulo </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Widget de instalação (por exemplo, a criação de elemento, aplicar tematizar
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ /, eventos ligam etc)
</font></font></span><font><font>         _create </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / _create Será executado automaticamente na primeira vez 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / este widget é chamado. </font><font>Coloque o widget inicial 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / código de configuração aqui, então você pode acessar o elemento 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / em que o widget foi chamado via this.element. 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / As opções definidas acima podem ser acessados 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>​​/ / via this.options this.element.addStuff ( );
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Destruir um plugin instanciado e limpar 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / modificações o widget fez para o DOM
</font></font></span><font><font>         destruir </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / This.element.removeStuff ();
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, destruir deve ser chamado a partir do 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>widget / / base
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> destruir </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>chamada </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> esta </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9, definir _destroy vez e don 't 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / se preocupar 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / chamando o widget base
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodB </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / _trigger despacha callbacks do plugin user 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / pode assinar
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / assinatura: _trigger ("callbackName" [eventObject] 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / [UIObject])
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / eg. </font><font>this._trigger ("pairar", e / * onde e.type == 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / "mouseenter" * /, {pairou: $ (e.target)});
</font></font></span><font><font>             isso </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'MethodA' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodA </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            isso </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'DataChanged' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Responder a todas as alterações que o usuário faz com o 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>método / / option
</font></font></span><font><font>         _setOption </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> valor </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            interruptor </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            caso </font></font><span class="token string"><font><font>"someValue" </font></font></span><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options.someValue doSomethingWith = (valor);
 </font></font></span>                <span class="token keyword"><font><font>quebra </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font><font> 
            padrão </font></font><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options [key] = value;
 </font></font></span>                <span class="token keyword"><font><font>pausa </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
            <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, _setOption deve ser chamado manualmente 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / para o widget base
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> _setOption </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>aplicar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> argumentos </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9 _super o método pode ser usado em vez
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / this._super ( "_setOption", chave, valor);
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><a href="http://ajpiano.com/widgetfactory/#slide1"><font><font>O jQuery UI Widget Factory</font></font></a><sup class="print_only"> 8</sup></li>
<li><font><font>" </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff706600"><font><font>Introdução à Stateful Plugins eo Widget Factory</font></font></a><sup class="print_only"> 9</sup><font><font> ", Doug Neiner</font></font></li>
<li><font><font>" </font></font><a href="http://wiki.jqueryui.com/w/page/12138135/Widget%20factory"><font><font>Widget Factory</font></font></a><sup class="print_only"> 10</sup><font><font> "(explicado), Scott Gonzalez</font></font></li>
<li><font><font>" </font></font><a href="http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/"><font><font>Compreender jQuery UI Widgets: um tutorial</font></font></a><sup class="print_only"> 11</sup><font><font> , "hacking em 0300</font></font></li>
</ul>
<h3><font><font>Namespacing E Namespacing Nested</font></font></h3>
<p><font><font>Namespacing seu código é uma forma de evitar colisões com outros objetos e variáveis ​​no namespace global. </font><font>Eles são importantes porque você quer proteger o seu plugin de quebrar no caso de um outro script na página usa a mesma variável ou nomes como o seu plugin. </font><font>Como um bom cidadão do namespace global, você também deve fazer o seu melhor para não impedir que os scripts de outros desenvolvedores de executar por causa dos mesmos problemas.</font></font></p>
<p><font><font>JavaScript realmente não tem suporte embutido para namespaces como outras linguagens de fazer, mas tem objetos que podem ser usados ​​para alcançar um efeito similar. </font><font>Empregando um objeto de nível superior, como o nome do seu namespace, você pode facilmente verificar a existência de outro objeto na página com o mesmo nome. </font><font>Se tal objeto não existe, então vamos defini-lo, se ele não existe, então nós simplesmente estendê-lo com o nosso plugin.</font></font></p>
<p><font><font>Objetos (ou melhor, literais de objeto) pode ser usado para criar namespaces aninhados, como </font></font><code><font><font>namespace.subnamespace.pluginName</font></font></code><font><font> e assim por diante. </font><font>Mas, para manter as coisas simples, o clichê namespacing abaixo deve dar tudo que você precisa para começar com esses conceitos.</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery namespaced 'Iniciado' plug-in clichê</font></font><font></font><font><font>
 * Autor: @ dougneiner</font></font><font></font><font><font>
 * Outras mudanças: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>, </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
    <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token operator"><font><font>!</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myNamespace </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myNamespace </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
    $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myNamespace </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myPluginName </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> el </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> myFunctionParam </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
       <span class="token comment" spellcheck="true"><font><font>/ / Para evitar problemas de escopo, use 'base' em vez de 'presente'
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / para referenciar esta classe de eventos internos e funções.
 </font></font></span>        <span class="token keyword"><font><font>var</font></font></span><font><font> de base </font></font><span class="token operator"><font><font>=</font></font></span><font><font> presente </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Acesso a versões do jQuery e DOM do elemento
</font></font></span><font><font>         de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> $ el </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> el </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> 
        de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> el </font></font><span class="token operator"><font><font>=</font></font></span><font><font> el </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Adicione uma referência inversa ao objeto DOM
</font></font></span><font><font>         de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> $ el </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>dados </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "myNamespace.myPluginName" </font></font></span> <span class="token punctuation"><font><font>,</font></font></span><font><font> de base </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
        de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> inicialização </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myFunctionParam </font></font><span class="token operator"><font><font>=</font></font></span><font><font> myFunctionParam </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
            de base </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estendem </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> { </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font>  
            $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> MyNamespace </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myPluginName </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> defaultOptions </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Coloque o seu código de inicialização aqui
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Exemplo de Função, tire a usar
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / base.functionName = function (paramaters) {
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ /};
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / Run inicializador
</font></font></span><font><font>         de base </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Init </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
    $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myNamespace </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> myPluginName </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> defaultOptions </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        myDefaultValue </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token string"><font><font>"" </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
    $<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>mynamespace_myPluginName <span class="token operator">=</span> <span class="token keyword">function</span> 
        <span class="token punctuation">(</span> myFunctionParam<span class="token punctuation">,</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">(</span><span class="token keyword">new</span> $<span class="token punctuation">.</span>myNamespace<span class="token punctuation">.</span><span class="token function">myPluginName<span class="token punctuation">(</span></span>this<span class="token punctuation">,</span> 
            myFunctionParam<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/"><font><font>Namespacing em JavaScript</font></font></a><sup class="print_only"> 12</sup><font><font> ", Angus Croll</font></font></li>
<li><font><font>" </font></font><a href="http://ryanflorence.com/use-your-fn-jquery-namespace/"><font><font>Use Your $. fn jQuery Namespace</font></font></a><sup class="print_only"> 13</sup><font><font> ", Ryan Florence</font></font></li>
<li><font><font>" </font></font><a href="http://michaux.ca/articles/javascript-namespacing"><font><font>Namespacing JavaScript</font></font></a><sup class="print_only"> 14</sup><font><font> ", Peter Michaux</font></font></li>
<li><font><font>" </font></font><a href="http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html"><font><font>Módulos e namespaces em JavaScript</font></font></a><sup class="print_only"> 15</sup><font><font> ", Axel Rauschmayer</font></font></li>
</ul>
<h3><font><font>Eventos personalizados para Pub / Sub (com a fábrica Widget)</font></font></h3>
<p><font><font>Você pode ter usado o Observer (Pub / Sub) padrão no passado para desenvolver aplicações JavaScript assíncronas. </font><font>A ideia básica aqui é que os elementos publicará as notificações de eventos quando algo interessante acontece em sua aplicação. </font><font>Outros elementos, em seguida, assinar ou ouvir esses eventos e responder adequadamente. </font><font>Isso resulta na lógica para a sua aplicação, sendo significativamente mais dissociada (que é sempre bom).</font></font></p>
<p><font><font>Em jQuery, temos essa idéia de que eventos personalizados proporcionar um built-in meios para implementar um sistema de publicação e que é bastante semelhante ao padrão Observer inscrever. </font><font>Então, </font></font><code><font><font>bind ('eventType')</font></font></code><font><font> é funcionalmente equivalente a realizar </font></font><code><font><font>subscribe ('eventType')</font></font></code><font><font> e </font></font><code><font><font>gatilho ('eventType')</font></font></code><font><font> é aproximadamente equivalente a </font></font><code><font><font>publicar ('eventType')</font></font></code><font><font> .</font></font></p>
<p><font><font>Alguns desenvolvedores podem considerar o sistema de eventos jQuery como tendo muita sobrecarga para ser usado como um sistema de publicação e se inscrever, mas foi projetada para ser confiável e robusto para a maioria dos casos de uso. </font><font>Na seguinte UI modelo de fábrica Widget jQuery, vamos implementar um costume pub baseado em eventos básico / sub padrão que permite que o nosso plugin para subscrever notificações de eventos do resto da nossa aplicação, que os publica.</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery costume-eventos do plugin clichê</font></font><font></font><font><font>
 * Autor: DevPatch</font></font><font></font><font><font>
 * Outras mudanças: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Neste padrão, usamos eventos customizados do jQuery para adicionar </font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Pub / sub (publish / subscribe) recursos para widgets. 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Cada widget iria publicar certos eventos e assinar 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / para os outros. </font><font>Esta abordagem efetivamente ajuda a separar 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / os widgets e que lhes permite funcionar de forma independente.
 </font></font></span>
<span class="token punctuation"><font><font>; </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
    $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Widget </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "ao.eventStatus" </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        opções </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
        <font></font><font><font>
        _create </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
            <span class="token keyword"><font><font>var</font></font></span><font><font> auto </font></font><span class="token operator"><font><font>=</font></font></span><font><font> presente </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Self.element.addClass ("my-widget");
 </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / subscrever 'myEventStart'
</font></font></span><font><font>             auto </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> elemento </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>ligam </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "myEventStart" </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> e </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "start evento" </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
            <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Assinatura para 'myEventEnd'
</font></font></span><font><font>             auto </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> elemento </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>ligam </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "myEventEnd" </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> e </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "end evento" </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
            <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Baixa para 'myEventStart'
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / self.element.unbind ("myEventStart", function (e) {
 </font></font></span>               <span class="token comment" spellcheck="true"><font><font>/ / / console.log ("retirado para este evento"); 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ /});
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        destruir </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>a função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
            $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> destruir </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>aplicar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> argumentos </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>, </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span>
<span class="token comment" spellcheck="true"><font></font><font><font>
Notificações de eventos / / Publicação</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Uso: 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>. / / $ (". my-widget") trigger ("myEventStart");
 </font></font></span><span class="token comment" spellcheck="true"><font><font>. / / $ (". my-widget") trigger ("myEventEnd");</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://www.devpatch.com/2010/03/communication-between-jquery-ui-widgets/"><font><font>Comunicação entre jQuery UI Widgets</font></font></a><sup class="print_only"> 16</sup><font><font> , "Benjamin Sternthal</font></font></li>
<li><font><font>" </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx"><font><font>Entendendo o Padrão Publish / Subscribe para maior escalabilidade JavaScript</font></font></a><sup class="print_only"> 17</sup><font><font> ", Addy Osmani</font></font></li>
</ul>
<h3><font><font>Herança de protótipos com o padrão Ponte DOM-To-Object</font></font></h3>
<p><font><font>Em JavaScript, não temos a noção tradicional de classes que você encontraria em outras linguagens de programação clássicas, mas temos herança prototípica. </font><font>Com a herança prototípica, um objeto herda de outro objeto. </font><font>E podemos aplicar este conceito para desenvolvimento de plugins jQuery.</font></font></p>
<p><a href="http://alexsexton.com/"><font><font>Alex Sexton</font></font></a><font><font> e </font></font><a href="http://scottgonzalez.com/"><font><font>Scott Gonzalez</font></font></a><font><font> ter olhado para o tema em detalhe. </font><font>Em suma, eles descobriram que para o desenvolvimento organizado modular, separando claramente o objeto que define a lógica de um plugin do processo de geração do plugin si só pode ser benéfico. </font><font>A vantagem é que o teste de código do seu plugin se torna mais fácil, e você também pode ajustar a forma como as coisas funcionam nos bastidores, sem alterar a maneira que qualquer objeto APIs você implementou são usados.</font></font></p>
<p><font><font>No post anterior Sexton sobre este tema, ele implementa uma ponte que permite que você conecte a sua lógica geral de um plugin especial, que temos implementado no modelo abaixo. </font><font>Outra vantagem deste modelo é que você não tem que repetir constantemente o mesmo código de inicialização do plugin, garantindo, assim, que os conceitos por trás do desenvolvimento DRY são mantidos. </font><font>Alguns desenvolvedores também pode encontrar este padrão mais fácil de ler do que outros.</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * Protótipo herança do plugin jQuery clichê</font></font><font></font><font><font>
 * Autor: Alex Sexton, Scott Gonzalez</font></font><font></font><font><font>
 * Outras mudanças: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / MeuObjeto - um objeto que representa um conceito que você quer </font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Para o modelo (por exemplo, um carro)
 </font></font></span><span class="token keyword"><font><font>var</font></font></span><font><font> myObject </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
  inicialização </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / Mix nos-in passados ​​por opções com as opções padrão
</font></font></span><font><font>     desta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estendem </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token punctuation"><font><font> { </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Salva o elemento de referência, tanto como jQuery
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / referência e referência de normalidade
</font></font></span><font><font>     esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> elem   </font></font><span class="token operator"><font><font>=</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>;</font></font></span><font><font> 
    isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> $ elem </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Construir estrutura inicial do DOM
</font></font></span><font><font>     este </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_build </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Retorna este para que possamos cadeia e usar a ponte com menos código.
 </font></font></span>    <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>; </font></font></span>
  <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> 
  opções </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
    name </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token string"><font><font>"Não </font></font></span>
  <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font><span class="token comment" spellcheck="true"><font>Você tem acesso direto ao associado e cache
 </font></span><span class="token comment" spellcheck="true"><font>/ / jQuery elemento
 </font></span><span class="token comment" spellcheck="true"><font>/ / isto $ elem.append ('&lt;p&gt;' + msg + '&lt;/ p&gt;');.
 </font></span><span class="token punctuation"><font>} </font></span><span class="token punctuation"><font>} </font></span><span class="token punctuation"><font>;</font></span></font><span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
   <span class="token comment" spellcheck="true"><font></font></span>  <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
   <span class="token comment" spellcheck="true"><font></font></span>   <span class="token comment" spellcheck="true"><font></font></span>   <span class="token comment" spellcheck="true"><font></font></span>  <span class="token punctuation"><font></font></span>
<span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
Teste de apoio / / Object.create, e fallback para navegadores sem ele</font></font><font></font>
</span><span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> Object<span class="token punctuation">.</span>create <span class="token operator">!</span><span class="token operator">==</span> <span class="token string">'function'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Object<span class="token punctuation">.</span>create <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">function</span> <span class="token function">F<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
        F<span class="token punctuation">.</span>prototype <span class="token operator">=</span> o<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Cria um plugin baseado em um objeto definido</font></font><font></font>
</span>$<span class="token punctuation">.</span>plugin <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> name<span class="token punctuation">,</span> object <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  $<span class="token punctuation">.</span>fn<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> options <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> this<span class="token punctuation">.</span><span class="token function">each<span class="token punctuation">(</span></span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> $<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> name <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        $<span class="token punctuation">.</span><span class="token function">data<span class="token punctuation">(</span></span> this<span class="token punctuation">,</span> name<span class="token punctuation">,</span> Object<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span>object<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span> 
        options<span class="token punctuation">,</span> this <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Usage:</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Com meuObjeto, podemos agora fazer basicamente o seguinte:
 </font></font></span><span class="token comment" spellcheck="true"><font><font>. / / $ plugin ('myobj', meuObjeto);
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / E neste momento nós poderíamos fazer o seguinte</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>. / / $ ('# Elem') myobj ({name: "John"});
 </font></font></span><span class="token comment" spellcheck="true"><font><font>. / / var inst = $ ('# elem') dados ('myobj');
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / inst.myMethod ('Eu sou um método ');</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://alexsexton.com/?p=51"><font><font>Usando Padrões de Herança organizar grandes aplicações jQuery</font></font></a><sup class="print_only"> 18</sup><font><font> , "Alex Sexton</font></font></li>
<li><font><font>" </font></font><a href="http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps"><font><font>Como Gerenciar grandes aplicações com jQuery ou qualquer outra coisa</font></font></a><sup class="print_only"> 19</sup><font><font> "(uma discussão mais aprofundada), Alex Sexton</font></font></li>
<li><font><font>" </font></font><a href="http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html"><font><font>Exemplo prático da necessidade de Herança de protótipos</font></font></a><sup class="print_only"> 20</sup><font><font> ", Neeraj Singh</font></font></li>
<li><font><font>" </font></font><a href="http://javascript.crockford.com/prototypal.html"><font><font>Herança de protótipos em JavaScript</font></font></a><sup class="print_only"> 21</sup><font><font> ", Douglas Crockford</font></font></li>
</ul>
<h3><font><font>jQuery UI Widget Factory Ponte</font></font></h3>
<p><font><font>Se você gostou da idéia de geração de plugins baseados em objetos no último padrão de design, então você pode estar interessado em um método encontrado no jQuery UI Widget Factory chamada </font></font><code><font><font>$. widget.bridge</font></font></code><font><font> . </font><font>Esta ponte serve basicamente como uma camada intermediária entre um objeto JavaScript que é criada usando </font></font><code><font><font>$. Widget</font></font></code><font><font> e API do jQuery, proporcionando uma mais built-in solução para alcançar a definição do plugin baseado em objeto. </font><font>Efetivamente, nós somos capazes de criar plugins com estado usando um construtor personalizado.</font></font></p>
<p><font><font>Além disso, </font></font><code><font><font>. $ widget.bridge</font></font></code><font><font> fornece acesso a um certo número de outras capacidades, incluindo o seguinte:</font></font></p>
<ul>
<li><font><font>Métodos públicos e privados são tratados como seria de esperar em OOP clássico (ou seja, os métodos públicos estão expostos, enquanto as chamadas para métodos privados não são possíveis);</font></font></li>
<li><font><font>Proteção automática contra várias inicializações;</font></font></li>
<li><font><font>A geração automática de instâncias de um objeto passado e armazenamento deles dentro da seleção interna </font></font><code><font><font>de dados $.</font></font></code><font><font> cache;</font></font></li>
<li><font><font>As opções podem ser alterados após a inicialização.</font></font></li>
</ul>
<p><font><font>Para mais informações sobre como usar este padrão, veja os comentários no clichê abaixo:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery UI Widget fábrica "ponte" clichê do plugin</font></font><font></font><font><font>
 * Autor: @ erichynds</font></font><font></font><font><font>
 * Outras alterações, comentários adicionais: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / A "widgetName" construtor do objeto</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Necessário: este deve aceitar dois argumentos,
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / opções: um objeto de opções de configuração
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / elementos: o elemento DOM a instância foi criada
</font></font></span><span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
<span class="token punctuation"><font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / O protótipo "widgetName"</font></font><font></font>
</span><font><font>widgetName </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
    <font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / _create Será executado automaticamente na primeira vez este 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ widget / é chamado
</font></font></span><font><font>     _create </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span>
       <span class="token comment" spellcheck="true"><font><font>/ / criação de código
 </font></font></span>    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Obrigatório: a lógica de inicialização para o plugin entra em _init
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / Este é disparado quando a instância é criada pela primeira vez e quando 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / tentativa de inicializar o widget novamente (pela ponte)
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / depois que ele já foi inicializado.
</font></font></span><font><font>     _init </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span>
       <span class="token comment" spellcheck="true"><font><font>/ / init código
 </font></font></span>    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Necessário: objetos a serem usados ​​com a ponte deve conter um 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / 'opção'. </font><font>Pós-inicialização, a lógica para alterar as opções
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / passa aqui. 
</font></font></span><font><font>     opção </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> valor </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font></font>
        <font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Opcional: get / alterar as opções de pós inicialização
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>. / / ignorar, se você não precisar deles
 </font></font></span>        
       <span class="token comment" spellcheck="true"><font><font>. / / assinatura: $ ("# foo ') bar ({cool: false});
 </font></font></span>        <span class="token keyword"><font><font>se </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>isPlainObject </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> chave </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
            isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estender </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token boolean"><font><font> os verdadeiros </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
        <font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Assinatura:. $ ('# Foo') opção ('cool'); - getter
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> tecla </font></font><span class="token operator"><font><font>&amp;&amp; </font></font></span> <span class="token keyword"><font><font>typeof</font></font></span><font><font> valor </font></font><span class="token operator"><font><font>=== </font></font></span> <span class="token string"><font><font>"undefined" </font></font></span> <span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span>
            <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>[</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>] </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
            <font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Assinatura: $ ("# foo ') bar (' option ',' baz ', false);.
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>[</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>] </font></font></span> <span class="token operator"><font><font>=</font></font></span><font><font> valor </font></font><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>}</font></font></span><font></font>
        <font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Necessário:. Opção deve retornar a instância atual 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / Quando re-inicializar uma instância de elementos, a opção 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>. / / é chamado pela primeira vez e, em seguida, é acorrentado ao método _init
 </font></font></span>        <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>; </font></font></span>  
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Aviso nenhum sublinhado é usado para métodos pública
</font></font></span><font><font>     publicFunction </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font>  
        consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "função pública" </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Destaca são usados ​​para métodos privados
</font></font></span><font><font>     _privateFunction </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font>  
        consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "evento privado" </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Uso:</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Conecta o obj widget para a API do jQuery sob a "foo" namespace</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>. / / $ Widget.bridge ("foo", widgetName);
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Cria uma instância do widget para uso</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>. / / Var instance = $ ("# elem") foo ({
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / baz: true
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ /});
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / A instância Widget existe em dados do elem</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>. / / Instance.data ("foo") elemento / / =&gt; # elem elemento
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Ponte permite que você chame métodos públicos ...</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Instance.foo ("publicFunction") / / =&gt; "método público"
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Ponte impede chamadas para métodos internos</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Instance.foo ("_privateFunction") / / =&gt; # elem elemento</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/"><font><font>Usando o $. widget.bridge Fora do Widget Factory</font></font></a><sup class="print_only"> 22</sup><font><font> ", Eric Hynds</font></font></li>
</ul>
<h3><font><font>jQuery Widgets móvel com a fábrica Widget</font></font></h3>
<p><font><font>jQuery Mobile é um framework que incentiva o design de aplicações Web onipresentes que funcionam tanto em dispositivos móveis populares e plataformas e no ambiente de trabalho. </font><font>Ao invés de escrever aplicativos exclusivos para cada dispositivo ou sistema operacional, basta escrever o código uma vez e deve idealmente ser executado em muitos dos navegadores A-, B-e C-grau lá fora no momento.</font></font></p>
<p><font><font>Os fundamentos atrás jQuery móvel também pode ser aplicado para encaixe e desenvolvimento widget, como pode ser visto em algumas das principais widgets móveis jQuery utilizados na suite oficial biblioteca. </font><font>O que é interessante aqui é que, embora haja muito pequenas, as diferenças sutis em escrever um widget "mobile" otimizado, se você estiver familiarizado com o uso do jQuery UI Widget Factory, você deve ser capaz de começar a escrever estes imediatamente.</font></font></p>
<p><font><font>O widget móvel otimizado abaixo tem uma série de diferenças interessantes do que o padrão normal Widget UI vimos anteriormente:</font></font></p>
<ul>
<li><code><font><font>$. Mobile.widget</font></font></code><font><font> é referenciado como um protótipo de ferramenta existente de que herdar. </font><font>Para widgets padrão, passando por qualquer protótipo é desnecessária para o desenvolvimento básico, mas usando este protótipo específico Widget jQuery-móvel oferece acesso interno para a sua formatação das "opções".</font></font></li>
<li><font><font>Você notará em </font></font><code><font><font>_create ()</font></font></code><font><font> um guia sobre como os widgets móveis jQuery oficiais lidar seleção elemento, optando por uma abordagem baseada em papel que se encaixa melhor a jQM mark-up. </font><font>Isso não é de todo a dizer que a seleção padrão não é recomendado, só que esta abordagem poderia fazer mais sentido, dada a estrutura das páginas jQM.</font></font></li>
<li><font><font>Orientações também são fornecidos em forma de comentário para aplicar seus métodos plugin em </font></font><code><font><font>pagecreate</font></font></code><font><font> , bem como para selecionar o aplicativo plug-in via funções de dados e atributos de dados.</font></font></li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * (JQuery móvel) jQuery UI Widget da fábrica clichê plugin (para 1,8 / 9 +)</font></font><font></font><font><font>
 * Autor: @ scottjehl</font></font><font></font><font><font>
 * Outras mudanças: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>, </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Define um widget em um espaço de nomes de sua escolha
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / aqui 'mobile' tem sido usado no primeiro parâmetro
</font></font></span><font><font>     $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Widget </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "mobile.widgetName" </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> móvel </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Opções a serem usadas como padrões
</font></font></span><font><font>         opções </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            foo </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token boolean"><font><font>verdadeiro </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> 
            bar </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token boolean"><font><font>falso </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        _create </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / _create será executado automaticamente na primeira vez este 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ widget / é chamado. </font><font>Coloque o código set-up inicial Widget 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / aqui, então você pode acessar o elemento em que 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / o widget foi chamado via this.element
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / As opções definidas acima podem ser acessados ​​via 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>this.options / /
 </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / var m = this.element,
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / p = m.parents (": jqmData (role = 'page')"),
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / c = p.find (": jqmData (role = 'content')")
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Métodos privados / props começar com sublinhados
</font></font></span><font><font>         _dosomething </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span> <span class="token punctuation"><font><font>. </font></font></span><span class="token punctuation"><font><font>. </font></font></span><span class="token punctuation"><font><font>. </font></font></span> <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Métodos públicos como estes abaixo podem pode ser chamado 
 </font></font></span>               <span class="token comment" spellcheck="true"><font><font>/ / externamente: 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / $ ("# myelem"), Foo ("Enable", argumentos);.
</font></font></span><font><font> 
        enable </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span> <span class="token punctuation"><font><font>. </font></font></span><span class="token punctuation"><font><font>. </font></font></span><span class="token punctuation"><font><font>. </font></font></span> <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Destruir um plugin instanciado e limpar modificações 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / o widget fez ao DOM
</font></font></span><font><font>         destruir </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>a função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / this.element.removeStuff ();
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, destruir deve ser chamado a partir da 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>base / / Widget
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> destruir </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>chamar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9, definir _destroy vez e não 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / se preocupar chamando o widget base
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodB </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / _trigger despacha callbacks o usuário plugin pode 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / assinar
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / assinatura: _trigger ("callbackName" [eventObject]
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / [UIObject])
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / eg. </font><font>this._trigger ("pairar", e / * onde e.type == 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / "mouseenter" * /, {pairou: $ (e.target)});
</font></font></span><font><font>             isso </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'MethodA' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodA </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            isso </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'DataChanged' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Responder a todas as alterações que o usuário faz com o método opção
</font></font></span><font><font>         _setOption </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> valor </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            interruptor </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            caso </font></font><span class="token string"><font><font>"someValue" </font></font></span><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options.someValue doSomethingWith = (valor);
 </font></font></span>                <span class="token keyword"><font><font>pausa </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font><font> 
            default </font></font><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options [key] = value;
 </font></font></span>                <span class="token keyword"><font><font>quebra </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
            <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, _setOption deve ser invocado manualmente a partir de 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / o widget base
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> _setOption </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>aplicar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> argumentos </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9 _super o método pode ser usado em vez
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / this._super ( "_setOption", chave, valor);
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Uso: $ ("# myelem") foo (opções);.</font></font><font></font>
</span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font><font>/ * Algumas notas adicionais - Apagar esta seção antes de usar o clichê.</font></font><font></font>
<font></font><font><font>
 Nós podemos também auto-init esta ferramenta sempre que uma nova página no jQuery Mobile é criado. </font><font>"página" despachos plugin jQuery Mobile um evento de "criar" quando uma página do jQuery Mobile (encontrado via data-role = página attr) é inicializado pela primeira vez.</font></font><font></font>
<font></font><font><font>
Podemos ouvir para esse evento (chamado de "pagecreate") e executar nosso plugin automaticamente sempre que uma nova página é criada.</font></font><font></font>
<font></font><font><font>
$ (Document). Bind ("pagecreate", function (e) {</font></font><font></font><font><font>
    / / Aqui, e.target refere-se à página que foi criado </font></font><font></font><font><font>
    / / (Que é o alvo do evento pagecreate)</font></font><font></font><font><font>
    / / Então, podemos simplesmente encontrar elementos desta página que correspondem a um </font></font><font></font><font><font>
    / / Selector de nossa escolha, e chamar nosso plugin sobre eles.</font></font><font></font><font><font>
    / / Aqui é como nós chamamos o nosso "foo" plugin em qualquer elemento com um </font></font><font></font><font><font>
    / / Atributo "foo" data-role:</font></font><font></font><font><font>
    . $ (E.target) encontrar ("[data-role = 'foo']") foo (opções).;</font></font><font></font>
<font></font><font><font>
    / / Ou, melhor ainda, vamos escrever a contabilidade seletor para o configurável </font></font><font></font><font><font>
    / /-Atributo de dados namespace</font></font><font></font><font><font>
    . $ (E.target) encontrar (": jqmData (role = 'foo')") foo (opções);.</font></font><font></font><font><font>
});</font></font><font></font>
<font></font><font><font>
É isso aí. </font><font>Agora você pode simplesmente referenciar o script que contém o seu widget e pagecreate obrigatório em uma página do site funcionando jQuery Mobile, e ele será automaticamente executado como qualquer outro plugin jQM.</font></font><font></font><font><font>
 * /</font></font></span></code></pre>
<h3><font><font>RequireJS And The jQuery UI Widget Fábrica</font></font></h3>
<p><font><font>RequireJS é um carregador de script que fornece uma solução limpa para encapsular a lógica de aplicação dentro de módulos gerenciáveis. </font><font>É capaz de carregar os módulos na ordem correta (através de seu plugin ordem), que simplifica o processo de combinar os scripts através da sua excelente otimizador, e fornece os meios para definir dependências de módulo em uma base por módulo.</font></font></p>
<p><font><font>James Burke escreveu um conjunto de tutoriais sobre como começar com RequireJS. </font><font>Mas e se você já está familiarizado com ele e gostaria de envolver seus widgets jQuery UI ou plugins em um invólucro módulo RequireJS compatível?.</font></font></p>
<p><font><font>No padrão clichê abaixo, demonstramos como um widget compatível pode ser definido que faz o seguinte:</font></font></p>
<ul>
<li><font><font>Permite a definição de dependências módulo widget, construindo em cima do jQuery UI clichê anterior apresentado anteriormente;</font></font></li>
<li><font><font>Demonstra uma abordagem para passar em ativos de modelo HTML para criar Widgets modelados com jQuery (em conjunto com o plugin jQuery tmpl) (Ver os comentários em </font></font><code><font><font>_create ()</font></font></code><font><font> ).</font></font></li>
<li><font><font>Inclui uma dica rápida sobre os ajustes que você pode fazer para o seu módulo Widget se você quiser depois passá-lo através do RequireJS otimizador</font></font></li>
</ul>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 * JQuery UI Widget + RequireJS módulo clichê (para 1,8 / 9 +)</font></font><font></font><font><font>
 * Autores: @ jrburke, @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
 <span class="token comment" spellcheck="true"><font></font><font><font>
/ / Nota de James:</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Este assume que você está usando o RequireJS + arquivo jQuery, e 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / se os seguintes arquivos estão todos no mesmo diretório: 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ /
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / - exigem-jquery.js 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / - jquery-ui.custom.min. js (personalizado com jQuery UI construir fábrica de widget) 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / - templates / 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / - asset.html 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / - ao.myWidget.js 
</font></font></span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Então você pode construir o widget assim: </font></font><font></font>
</span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Ao.myWidget.js arquivo: </font></font><font></font>
</span><span class="token function">define<span class="token punctuation">(</span></span><span class="token string">"ao.myWidget"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"jquery"</span><span class="token punctuation">,</span> <span class="token string">"text!templates/asset.html"</span><span class="token punctuation">,</span> <span class="token string">"jquery-ui.custom.min"</span><span class="token punctuation">,</span><span class="token string">"jquery.tmpl"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>$<span class="token punctuation">,</span> assetHtml<span class="token punctuation">)</span> <span class="token punctuation">{</span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Define o seu widget com um namespace de sua escolha
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / 'AO' é usado aqui como uma demonstração 
</font></font></span><font><font>     $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Widget </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> "ao.myWidget" </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span> <font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Opções a serem usadas como padrões
</font></font></span><font><font>         opções </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span> <font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Configurar widget (por exemplo, criar elemento, aplicam-se, divisão por temas 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ eventos / bind, etc)
</font></font></span><font><font>         _create </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / _create Será executado automaticamente na primeira vez 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / este widget é chamado. </font><font>Coloque a primeira ferramenta 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>de código / / set-up aqui, então você pode acessar o elemento 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / em que o widget foi chamado via this.element.
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / As opções definidas acima podem ser acessados ​​via 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ /
</font></font></span>
           <span class="token comment" spellcheck="true"><font></font></span>           <span class="token comment" spellcheck="true"><font></font></span>           <span class="token comment" spellcheck="true"><font></font></span>        <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Destruir um plugin instanciado e limpar modificações 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / que o widget tem feito para o DOM
</font></font></span><font><font>         destruir </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>a função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / t his.element.removeStuff ();
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, destruir deve ser chamado a partir da base 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / widget
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> destruir </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>chamar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9, definir _destroy vez e não se preocupe 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / about chamando o widget base
 </font></font></span>        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodB </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / _trigger despacha callbacks o usuário plugin pode 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / assinar
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / assinatura: _trigger ("callbackName" [eventObject] 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / [UIObject])
</font></font></span><font><font>             este </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'MethodA' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
        MethodA </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            isso </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>_trigger </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'DataChanged' </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> evento </font></font><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
                chave </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> valor
             </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Responder a todas as alterações que o usuário faz com o método opção
</font></font></span><font><font>         _setOption </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> valor </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            interruptor </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> chave </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
            caso </font></font><span class="token string"><font><font>"someValue" </font></font></span><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options.someValue doSomethingWith = (valor);
 </font></font></span>                <span class="token keyword"><font><font>pausa </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font><font> 
            default </font></font><span class="token punctuation"><font><font>: </font></font></span>
               <span class="token comment" spellcheck="true"><font><font>/ / this.options [key] = value;
 </font></font></span>                <span class="token keyword"><font><font>quebra </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
            <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.8, _setOption deve ser invocado manualmente a partir de 
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / o widget base
</font></font></span><font><font>             $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> Widget </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> _setOption </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>aplicar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> este </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> argumentos </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
           <span class="token comment" spellcheck="true"><font><font>/ / Para UI 1.9 _super o método pode ser usado em vez
 </font></font></span>           <span class="token comment" spellcheck="true"><font><font>/ / this._super ( "_setOption", chave, valor);
 </font></font></span>        <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Em algum lugar assetHtml seria usado para modelagem, dependendo 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / escolha.
 </font></font></span>    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span> 
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span> <font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Se você estiver indo para usar o otimizador RequireJS para combinar arquivos </font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Juntos, você pode deixar de fora o argumento "ao.myWidget" para definir: 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / define (["jquery", "! texto templates / asset.html", "jquery-ui.custom.min"], ...</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><a href="http://jqfundamentals.com/book/index.html#example-10.5"><font><font>Usando RequireJS com jQuery</font></font></a><sup class="print_only"> 23</sup><font><font> , Rebecca Murphey</font></font></li>
<li><font><font>" </font></font><a href="http://speakerrate.com/talks/2983-fast-modular-code-with-jquery-and-requirejs"><font><font>Código Modular rápido com jQuery e RequireJS</font></font></a><sup class="print_only"> 24</sup><font><font> ", James Burke</font></font></li>
<li><font><font>" </font></font><a href="http://jquerysbestfriends.com/#slide1"><font><font>Melhores amigos do jQuery    </font></font></a><sup class="print_only"> 25</sup><font><font> , "Alex Sexton</font></font></li>
<li><font><font>" </font></font><a href="http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html"><font><font>Gerenciando dependências Com RequireJS</font></font></a><sup class="print_only"> 26</sup><font><font> , "Ruslan Matveev</font></font></li>
</ul>
<h3><font><font>Globalmente e Per-Call Opções substituível (melhor padrão de Opções)</font></font></h3>
<p><font><font>Para o nosso próximo padrão, vamos olhar para uma melhor abordagem para configurar as opções e padrões para o seu plugin. </font><font>A maneira como você provavelmente está familiarizado com a definição de opções do plugin é passar através de um objeto literal de padrões para </font></font><code><font><font>$. estender</font></font></code><font><font> , como demonstrado em nosso clichê básico plugin.</font></font></p>
<p><font><font>Se, no entanto, você está trabalhando com um plugin com muitas opções personalizáveis ​​que você gostaria que os usuários sejam capazes de substituir de forma global ou em um nível per-call, então você pode estruturar as coisas um pouco diferente.</font></font></p>
<p><font><font>Em vez disso, referindo-se a um objeto definido opções dentro do namespace do plugin explicitamente (por exemplo, </font></font><code><font><font>$ fn.pluginName.options</font></font></code><font><font> ) e mesclando isso com todas as opções passadas para o plug-in quando ele é invocado, os usuários têm a opção de qualquer opções que passam através de plug-in durante a inicialização ou opções primordiais fora do plugin (como demonstrado aqui).</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *!</font></font><font></font><font><font>
 Plugin do clichê melhores opções "* jQuery</font></font><font></font><font><font>
 * Autor: @ cowboy</font></font><font></font><font><font>
 * Outras mudanças: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<font></font>
<span class="token punctuation"><font><font>, </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font><font><font>
    $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> pluginName </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Aqui é uma prática recomendada para substituir 'defaults'
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / com opções especificadas. </font><font>Note-se como, em vez de um 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>padrão / / regulares objeto que está sendo passado como o segundo
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>parâmetro / /, que em vez de se referir $. fn.pluginName.options 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / explicitamente, fundindo-a com as opções passadas diretamente 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / para o plugin. </font><font>Isso nos permite substituir as opções tanto 
 </font></font></span>       <span class="token comment" spellcheck="true"><font><font>/ / globalmente e em um per-call nível. 
</font></font></span><font><font> 
        opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estender </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token punctuation"><font><font> { </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> pluginName </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
        <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>cada </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token keyword"><font><font> função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
            <span class="token keyword"><font><font>var</font></font></span><font><font> elem </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
        <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Globalmente opções substituindo
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / Aqui estão os nossos publicamente acessíveis opções do plugin padrão 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / que estão disponíveis, caso o usuário não passar em todos 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / os valores esperados. </font><font>O usuário recebe um padrão
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / experiência, mas também pode substituir os valores conforme necessário.
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / eg. </font><font>$ Fn.pluginName.key = 'otherval';
</font></font></span><font><font> 
    $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> pluginName </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font><font><font>
        chave </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token string"><font><font>"valor" </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> 
        myMethod </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> param </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
            <font></font>
        <span class="token punctuation"><font><font>} </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
    <font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><a href="http://benalman.com/talks/jquery-pluginization.html"><font><font>Pluginization jQuery</font></font></a><sup class="print_only"> 27</sup><font><font> ea </font></font><a href="https://gist.github.com/472783/e8bf47340413129a8abe5fac55c83336efb5d4e1"><font><font>essência que o acompanha</font></font></a><sup class="print_only"> 28</sup><font><font> , Ben Alman</font></font></li>
</ul>
<h3><font><font>A Plugin altamente configurável e mutável</font></font></h3>
<p><font><font>Como o padrão de Alex Sexton, a seguinte lógica para o nosso plugin não está aninhado em um próprio plugin jQuery. </font><font>Em seu lugar, definir a lógica do nosso plugin usando um construtor e um literal objeto definido em seu protótipo, usando jQuery para a instanciação real do objeto plugin.</font></font></p>
<p><font><font>Personalização é levado para o próximo nível, empregando dois pequenos truques, um dos que você já viu em padrões anteriores:</font></font></p>
<ul>
<li><font><font>Opções pode ser substituído tanto globalmente quanto por conjunto de elementos;</font></font></li>
<li><font><font>As opções podem ser personalizadas em um </font></font><strong><font><font>elemento per-</font></font></strong><font><font> nível através de atributos de dados HTML5 (como mostrado abaixo). </font><font>Isto facilita um comportamento encaixe que pode ser aplicado a um conjunto de elementos, mas, em seguida, incorporada personalizado, sem a necessidade de instanciar cada elemento com um valor padrão diferente.</font></font></li>
</ul>
<p><font><font>Você não vê a última opção na natureza, muitas vezes, mas pode ser uma solução significativamente mais limpo (contanto que você não se importa a abordagem em linha). </font><font>Se você está se perguntando onde isso pode ser útil, imaginar escrevendo um plugin arrastável por um grande conjunto de elementos. </font><font>Você poderia ir sobre como personalizar as suas opções como esta:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><font><font>javascript</font></font><font></font>
$<span class="token punctuation">(</span><span class="token string">'.item-a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'top-left'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.item-b'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'bottom-right'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">(</span><span class="token string">'.item-c'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">draggable<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token string">'defaultPosition'</span><span class="token punctuation">:</span><span class="token string">'bottom-left'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
//etc</span></code></pre>
<p><font><font>Mas o uso de nossos padrões de abordagem em linha, o seguinte seria possível:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><font><font>javascript</font></font><font></font><font><font>
$ </font></font><span class="token punctuation"><font><font>( </font></font></span><span class="token string"><font><font>'. items' </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>draggable </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<pre class=" language-javascript"><code class=" language-javascript"><font><font>html
 </font></font><span class="token operator"><font><font>&lt;</font></font></span><font><font> li class </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"item"</font></font></span><font><font> dados </font></font><span class="token operator"><font><font>-</font></font></span><font><font> plugins </font></font><span class="token operator"><font><font>-</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>'{"defaultPosition": "top-esquerda"} " </font></font></span><span class="token operator"><font><font>&gt; </font></font></span><span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> div </font></font><span class="token operator"><font><font>&gt; </font></font></span>
<span class="token operator"><font><font>&lt;</font></font></span><font><font> li class </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"item"</font></font></span><font><font> dados </font></font><span class="token operator"><font><font>-</font></font></span><font><font> plugins </font></font><span class="token operator"><font><font>-</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>'{"defaultPosition" : "bottom-left"} " </font></font></span><span class="token operator"><font><font>&gt; </font></font></span><span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> div </font></font><span class="token operator"><font><font>&gt;</font></font></span></code></pre>
<p><font><font>E assim por diante. </font><font>Você pode muito bem ter uma preferência por uma dessas abordagens, mas é um outro padrão potencialmente útil para estar ciente.</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ *</font></font><font></font><font><font>
 * 'Altamente configurável' clichê mutável do plugin</font></font><font></font><font><font>
 * Autor: @ markdalgleish</font></font><font></font><font><font>
 * Outras alterações, comentários: @ addyosmani</font></font><font></font><font><font>
 * Licenciado sob a licença MIT</font></font><font></font><font><font>
 * /</font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Note que, com esse padrão, como por Alex de Sexton, a lógica do plugin</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Não foi aninhado em um plugin jQuery. </font><font>Em vez disso, basta usar
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / jQuery para sua instanciação.
 </font></font></span>
<span class="token punctuation"><font><font>; </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> indefinido </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
 <span class="token comment" spellcheck="true"><font><font>/ / Nosso plugin construtor
 </font></font></span>  <span class="token keyword"><font><font>var</font></font></span><font><font> Plugin </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
      isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> elem </font></font><span class="token operator"><font><font>=</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>;</font></font></span><font><font> 
      isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> $ elem </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>(</font></font></span><font><font> elem </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font><font> 
      isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token operator"><font><font>=</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
     <span class="token comment" spellcheck="true"><font><font>/ / Esta linha seguinte aproveita atributos de dados do HTML5
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / para suportar a personalização do plugin em um por elemento
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / base. </font><font>Por exemplo,
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / &lt;div class=item' data-plugin-options='{"message":"Goodbye World!"}'&gt; &lt;/ div&gt;
</font></font></span><font><font>       isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> metadata </font></font><span class="token operator"><font><font>=</font></font></span><font><font> esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> $ elem </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>dados </font></font><span class="token punctuation"><font><font>(</font></font></span></span> <span class="token string"><font><font> '-opções do plugin ' </font></font></span> <span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
 <span class="token comment" spellcheck="true"><font><font>/ / O protótipo plug-in
</font></font></span><font><font>   Plugin </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
    defaults </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
      mensagem </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token string"><font><font>"Hello World!" </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
    inicialização </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
     <span class="token comment" spellcheck="true"><font><font>/ / Apresente padrões que podem ser estendidos ou 
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>. / / global ou usando um objeto literal 
</font></font></span><font><font>       este </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> configuração </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>estender </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> { </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> defaults </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font>  
      esta </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> metadados </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
     <span class="token comment" spellcheck="true"><font><font>/ / Exemplo de uso:
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / Define a mensagem por exemplo:
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>. / / $ ('# elem') plugin ({message: 'Adeus mundo'});
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / ou
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / var p = new Plugin (document.getElementById ('elem'), 
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / {mensagem: 'Adeus mundo!'}) init ().
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / ou, defina a mensagem padrão mundial:
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>'Adeus mundo' / / Plugin.defaults.message =
</font></font></span><font><font> 
      esta </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>SampleMethod </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>, </font></font></span>
      <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font></font>
<font></font><font><font>
    SampleMethod </font></font><span class="token punctuation"><font><font>: </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
     <span class="token comment" spellcheck="true"><font><font>/ / eg. </font><font>mostrar a mensagem actualmente configurado
 </font></font></span>     <span class="token comment" spellcheck="true"><font><font>/ / console.log (this.config.message);
 </font></font></span>    <span class="token punctuation"><font><font>} </font></font></span>
  <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font><font><font>
  Plugin </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> defaults </font></font><span class="token operator"><font><font>=</font></font></span><font><font> Plugin </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> protótipo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> defaults </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
  $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> fn </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> plug-in </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
    <span class="token keyword"><font><font>retornar</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>cada </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token keyword"><font><font> função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
      <span class="token keyword"><font><font>novo </font></font></span> <span class="token class-name"><font><font>Plugin </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> este </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> opções </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>Init </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
  <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
 <span class="token comment" spellcheck="true"><font><font>/ / Opcional: window.Plugin = Plugin;
 </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>(</font></font></span><font><font> jQuery </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> janela </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> documento </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/"><font><font>A criação de plugins jQuery altamente configurável</font></font></a><sup class="print_only"> 29</sup><font><font> ", disse Mark Dalgleish</font></font></li>
<li><font><font>" </font></font><a href="http://markdalgleish.com/2011/09/html5data-creating-highly-configurable-jquery-plugins-part-2/"><font><font>Escrevendo plugins jQuery altamente configurável, Parte 2</font></font></a><sup class="print_only"> 30</sup><font><font> ", disse Mark Dalgleish</font></font></li>
</ul>
<h3><font><font>AMD-e módulos CommonJS-compatíveis</font></font></h3>
<p><font><font>Embora muitos o plugin e padrões widgets apresentados acima são aceitáveis ​​para uso geral, eles não estão sem os seus ressalvas. </font><font>Alguns exigem jQuery ou o jQuery UI Widget Factory para estar presente, a fim de função, enquanto que apenas alguns podiam ser facilmente adaptado para funcionar bem como módulos compatíveis global, tanto do lado do cliente e em outros ambientes.</font></font></p>
<p><font><font>Por essa razão, um número de desenvolvedores, inclusive eu, </font></font><a href="http://cdnjs.com/"><font><font>CDNjs</font></font></a><font><font> mantenedor </font></font><a href="https://github.com/thomasdavis"><font><font>Thomas Davis</font></font></a><font><font> e </font></font><a href="https://github.com/rpflorence"><font><font>RP Florence</font></font></a><font><font> , tem procurado, tanto a </font></font><a href="https://github.com/amdjs/amdjs-api/wiki/AMD"><font><font>AMD</font></font></a><font><font> (Definição Módulo Asynchronous) e </font></font><a href="http://wiki.commonjs.org/wiki/Modules"><font><font>CommonJS</font></font></a><font><font> especificações do módulo, na esperança de que se estendem padrões do plugin clichê para limpa trabalhar com pacotes e dependências. </font></font><a href="http://twitter.com/unscriptable"><font><font>John Hann</font></font></a><font><font> e </font></font><a href="https://gist.github.com/1251221"><font><font>Kit Cambridge</font></font></a><font><font> também têm explorado o trabalho nesta área.</font></font></p>
<h4><font><font>AMD</font></font></h4>
<p><font><font>O módulo de formato AMD (uma especificação para definição de módulos em que tanto o módulo e dependências podem ser carregados de forma assíncrona) tem um número de vantagens distintas, incluindo sendo ambos assíncrona e altamente flexível por natureza, removendo assim a um acoplamento apertado entre o código encontra normalmente e módulo identidade. </font><font>É considerado um trampolim confiável para o </font></font><a href="http://wiki.ecmascript.org/doku.php?id=harmony:modules"><font><font>sistema de módulos</font></font></a><font><font> propostos para ES Harmony.</font></font></p>
<p><font><font>Ao trabalhar com módulos de anônimos, a idéia da identidade de um módulo é seco, tornando-se trivial para evitar a duplicação de nomes de arquivos e código. </font><font>Como o código é mais portátil, que pode ser facilmente transferida para outro local, sem a necessidade de alterar o próprio código. </font><font>Os desenvolvedores também podem executar o mesmo código em vários ambientes usando apenas um otimizador AMD que trabalha com um ambiente CommonJS, como </font></font><a href="https://github.com/jrburke/r.js/"><font><font>r.js</font></font></a><font><font> .</font></font></p>
<p><font><font>Com a AMD, os dois conceitos-chave que você precisa para ter em conta são o </font></font><code><font><font>require</font></font></code><font><font> método e </font></font><code><font><font>definir</font></font></code><font><font> o método, o que facilita a definição do módulo e dependência de carregamento. </font><font>A </font></font><code><font><font>definir</font></font></code><font><font> método é utilizado para definir os módulos nomeado ou não com base na especificação, com a seguinte assinatura:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token function"><font><font>definir </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> module_id </font></font><span class="token comment" spellcheck="true"><font><font>/ * opcional * / </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>[</font></font></span><font><font> dependências </font></font><span class="token punctuation"><font><font>] </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> definição de </font></font><span class="token keyword"><font><font>função </font></font></span> <span class="token comment" spellcheck="true"><font><font>/ * função para instanciar o módulo ou objeto * / </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>Como você pode dizer a partir dos comentários inline, ID do módulo é um argumento opcional que normalmente é necessária apenas quando ferramentas de concatenação não AMD estão sendo usados ​​(que poderia ser útil em outros casos extremos, também). </font><font>Um dos benefícios de optar em não usar IDs de módulo é ter a flexibilidade necessária para mover o módulo todo o sistema de arquivos sem a necessidade de alterar a sua ID. </font><font>ID do módulo é equivalente a pasta caminhos em pacotes simples e quando não usado em pacotes.</font></font></p>
<p><font><font>O argumento dependências representa uma matriz de dependências que são exigidas pelo módulo que está sendo definido, eo terceiro argumento (de fábrica) é uma função que é executada para instanciar o módulo. </font><font>Um módulo barebone poderia ser definida como segue:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ / Note: aqui, a ID do módulo (MyModule) é usado para demonstração
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / fins apenas
 </font></font></span>
<span class="token function"><font><font>definir </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'MyModule' </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token punctuation"><font><font>[ </font></font></span><span class="token string"><font><font>'foo' </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token string"><font><font>'bar' </font></font></span><span class="token punctuation"><font><font>] </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> foo </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> bar </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / retorna um valor que define a exportação módulo
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / (ou seja, a funcionalidade que deseja expor para consumo)
 </font></font></span>    <span class="token keyword"><font><font>de retorno </font></font></span> <span class="token keyword"><font><font>da função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Um exemplo mais útil, contudo, podem ser:</font></font><font></font>
</span><span class="token function">define<span class="token punctuation">(</span></span><span class="token string">'myModule'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'math'</span><span class="token punctuation">,</span> <span class="token string">'graph'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> math<span class="token punctuation">,</span> graph <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
            plot<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword">return</span> graph<span class="token punctuation">.</span><span class="token function">drawPie<span class="token punctuation">(</span></span>math<span class="token punctuation">.</span><span class="token function">randomGrid<span class="token punctuation">(</span></span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><font><font>O </font></font><code><font><font>exigem</font></font></code><font><font> método, por outro lado, é normalmente usado para carregar o código em um arquivo JavaScript de nível superior ou em um módulo, caso deseje buscar dinamicamente dependências. </font><font>Aqui está um exemplo de seu uso:</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ / Aqui, são passadas as "exportações" dos dois módulos carregados como
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / função de argumentos para o callback
 </font></font></span>
<span class="token function"><font><font>exigem </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> [ </font></font></span><span class="token string"><font><font>'foo' </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token string"><font><font>'bar' </font></font></span><span class="token punctuation"><font><font>] </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> foo </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> bar </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
       <span class="token comment" spellcheck="true"><font><font>/ / resto do seu código aqui
 </font></font></span><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / E aqui está um exemplo-AMD que mostra carregada dinamicamente</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Dependências
 </font></font></span>
<span class="token function"><font><font>define </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token keyword"><font><font> função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> exigir </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span>
    <span class="token keyword"><font><font>var</font></font></span><font><font> isReady </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token boolean"><font><font>falso </font></font></span><span class="token punctuation"><font><font>,</font></font></span><font><font> foobar </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
    <span class="token function"><font><font>requerer </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> [ </font></font></span><span class="token string"><font><font>'foo' </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token string"><font><font>'bar' </font></font></span><span class="token punctuation"><font><font>] </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> foo </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> bar </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        isReady </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token boolean"><font><font>verdadeiro </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font><font> 
        foobar </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token function"><font><font>foo </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span> <span class="token operator"><font><font>+ </font></font></span> <span class="token function"><font><font>bar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Ainda podemos voltar um módulo de
 </font></font></span>    <span class="token keyword"><font><font>retorno </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font><font> 
        isReady </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> isReady </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> 
        foobar </font></font><span class="token punctuation"><font><font>:</font></font></span><font><font> foobar
     </font></font><span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>O acima são exemplos triviais de quão útil módulos AMD pode ser, mas eles devem fornecer uma fundação que ajuda a entender como eles funcionam. </font><font>Muitas grandes aplicações e empresas visíveis atualmente usam módulos AMD como parte de sua arquitetura, incluindo a </font></font><a href="http://www.ibm.com/"><font><font>IBM</font></font></a><font><font> ea </font></font><a href="http://www.bbc.co.uk/iplayer/"><font><font>iPlayer BBC</font></font></a><font><font> . </font><font>A especificação tem sido discutido há mais de um ano, tanto no Dojo e comunidades CommonJS, por isso teve tempo para evoluir e melhorar. </font><font>Para mais razões sobre o porquê muitos desenvolvedores estão optando por usar módulos AMD em seus aplicativos, você pode estar interessado no artigo de James Burke " </font></font><a href="http://tagneto.blogspot.com/2011/04/on-inventing-js-module-formats-and.html"><font><font>em inventar JS Formatos Módulo e carregadores de script</font></font></a><font><font> ".</font></font></p>
<p><font><font>Em breve, vamos olhar para escrever módulos compatíveis a nível mundial que trabalham com AMD e outros formatos de módulo e ambientes, algo que oferece ainda mais poder. </font><font>Antes disso, precisamos discutir brevemente um formato de módulo relacionado, um com uma especificação por CommonJS.</font></font></p>
<h4><font><font>CommonJS</font></font></h4>
<p><font><font>No caso de você não estiver familiarizado com ele, </font></font><a href="http://www.commonjs.org/"><font><font>CommonJS</font></font></a><font><font> é um grupo de trabalho voluntário que desenhos, protótipos e padroniza APIs JavaScript. </font><font>Até o momento, ele é tentado a ratificar padrões para </font></font><a href="http://www.commonjs.org/specs/modules/1.0/"><font><font>módulos</font></font></a><font><font> e </font></font><a href="http://wiki.commonjs.org/wiki/Packages/1.0"><font><font>pacotes</font></font></a><font><font> . </font><font>A proposta módulo CommonJS especifica uma API simples para declarar módulos do lado do servidor, mas, como John Hann corretamente estados, existem apenas duas maneiras de usar módulos CommonJS no navegador: ou envolvê-los ou envolvê-los.</font></font></p>
<p><font><font>O que isto significa é que pode ter os módulos envoltório do navegador (que pode ser um processo lento) ou em tempo de compilação (que pode ser rápido para executar no navegador, mas requer uma etapa de compilação).</font></font></p>
<p><font><font>Alguns desenvolvedores, no entanto, sinto que CommonJS é mais adequado para o desenvolvimento do lado do servidor, que é uma das razões para a discordância atual sobre qual formato deve ser usado como o padrão de fato na era pré-Harmony avançar. </font><font>Um argumento contra CommonJS é que muitos endereço CommonJS APIs recursos de servidor orientado que a pessoa simplesmente não seria capaz de implementar no nível do navegador em JavaScript, por exemplo, </font></font><code><font><font>io&gt;</font></font></code><font><font> , </font></font><code><font><font>sistema</font></font></code><font><font> e </font></font><code><font><font>js</font></font></code><font><font> pode ser considerado unimplementable pela natureza da sua funcionalidade.</font></font></p>
<p><font><font>Dito isto, saber como estruturar módulos CommonJS é útil para que possamos apreciar melhor como eles se encaixam na definição de módulos que podem ser usados ​​em todos os lugares. </font><font>Módulos que têm aplicações no cliente e no servidor incluir a validação, conversão e motores de templates. </font><font>A forma como alguns desenvolvedores escolher qual formato usar é optar por CommonJS quando um módulo pode ser usado em um ambiente de servidor e optar por AMD contrário.</font></font></p>
<p><font><font>Como os módulos da AMD são capazes de usar plugins e pode definir as coisas mais granulares, como construtores e funções, isso faz sentido. </font><font>CommonJS módulos são capazes de definir objetos que são entediantes para trabalhar com somente se você está tentando obter construtores deles.</font></font></p>
<p><font><font>Do ponto de vista estrutural, um módulo CommonJS é um pedaço reutilizável de JavaScript que as exportações de objetos específicos disponibilizados para qualquer código dependente, normalmente há nenhum wrappers de funções em torno desses módulos. </font><font>A abundância de tutoriais sobre como implementar módulos CommonJS estão lá fora, mas a um nível elevado, os módulos contêm basicamente duas partes principais: uma variável nomeados </font></font><code><font><font>exportações</font></font></code><font><font> , que contém os objetos que um módulo disponibiliza aos outros módulos, e um </font></font><code><font><font>require</font></font></code><font><font> de função, que Os módulos podem ser usados ​​para importar as exportações de outros módulos.</font></font></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ / Um módulo básico chamado 'foobar'
 </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token function"><font><font>foobar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
        isso </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> foo </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
                consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'Olá foo' </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font><font><font>
        este </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> bar </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font><font> 
                consola </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>log </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'Olá bar' </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
        <span class="token punctuation"><font><font>} </font></font></span>
<span class="token punctuation"><font><font>}</font></font></span><font></font>
<font></font><font><font>
exportações </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> foobar </font></font><span class="token operator"><font><font>=</font></font></span><font><font> foobar </font></font><span class="token punctuation"><font><font>;</font></font></span>
<span class="token comment" spellcheck="true"><font></font><font><font>
/ / Um aplicativo usando 'foobar'</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font></font><font><font>
/ / Acesse o módulo relativo ao caminho</font></font><font></font>
</span><span class="token comment" spellcheck="true"><font><font>/ / Onde tanto o uso e arquivos de módulo existir
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / no mesmo diretório
 </font></font></span>
<span class="token keyword"><font><font>var</font></font></span><font><font> foobar </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token function"><font><font>exigir </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> '/ foobar.' </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>.</font></font></span><font><font> foobar </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> 
    test    </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>new </font></font></span> <span class="token class-name"><font><font>foobar </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> foo </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font><font><font>
teste </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>bar </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>; </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / 'Olá bar'</font></font></span></code></pre>
<p><font><font>Há um grande número de bibliotecas JavaScript para lidar com módulo de carregamento em AMD e formatos CommonJS, mas minha preferência é </font></font><a href="http://requirejs.org/"><font><font>RequireJS</font></font></a><font><font> ( </font></font><a href="https://github.com/unscriptable/curl"><font><font>curl.js</font></font></a><font><font> também é bastante confiável). </font><font>Tutoriais completos sobre essas ferramentas estão além do escopo deste artigo, mas eu recomendo post "de João Hann </font></font><a href="http://unscriptable.com/index.php/2011/03/30/curl-js-yet-another-amd-loader/"><font><font>curl.js: Yet Another AMD carregador</font></font></a><font><font> ", e post de James Burke" </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff943568"><br><font><font>
LABjs e RequireJS: Carregando JavaScript Recursos de forma divertida</font></font></a><font><font> . "</font></font></p>
<p><font><font>Com o que nós cobrimos até agora, não seria ótimo se pudéssemos definir e carregar módulos plugin compatível com AMD, CommonJS e outros padrões que também são compatíveis com diferentes ambientes (do lado do cliente, do lado do servidor e não só)? </font><font>Nosso trabalho com a AMD e UMD (Universal Module Definition) plugins e widgets ainda está em um estágio muito precoce, mas estamos esperando para desenvolver soluções que podem fazer exatamente isso.</font></font></p>
<p><font><font>Um tal padrão que estamos </font></font><a href="https://github.com/addyosmani/jquery-plugin-patterns/issues/1"><font><font>trabalhando</font></font></a><font><font> no momento em que aparece a seguir, que tem as seguintes características:</font></font></p>
<ul>
<li><font><font>Um plugin núcleo / base é carregado em um </font></font><code><font><font>$. núcleo</font></font></code><font><font> namespace, que pode ser facilmente estendido usando extensões de plugins via o padrão namespacing. </font><font>Plugins carregados via tags de script preencher automaticamente um </font></font><code><font><font>plugin de</font></font></code><font><font> namespace em </font></font><code><font><font>núcleo</font></font></code><font><font> (ie </font></font><code><font><font>$. core.plugin.methodName ()</font></font></code><font><font> ).</font></font></li>
<li><font><font>O padrão pode ser muito agradável para trabalhar, porque as extensões plugin pode acessar as propriedades e métodos definidos na base ou, com um pouco de ajustes, substituir o comportamento padrão para que ele possa ser estendido para fazer mais.</font></font></li>
<li><font><font>Um carregador não é necessariamente obrigatório a todos para tornar esse padrão totalmente função.</font></font></li>
</ul>
<p><strong><font><font>usage.html</font></font></strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token operator"><font><font>&lt;</font></font></span><font><font> tipo de script </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"text / javascript"</font></font></span><font><font> src </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"http://code.jquery.com/jquery-1.6.4.min.js" </font></font></span><span class="token operator"><font><font>&gt; </font></font></span><span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> script de </font></font><span class="token operator"><font><font>&gt; </font></font></span>
<span class="token operator"><font><font>&lt;</font></font></span><font><font> tipo de script </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"text / javascript"</font></font></span><font><font> src </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"pluginCore . js " </font></font></span><span class="token operator"><font><font>&gt; </font></font></span><span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> script de </font></font><span class="token operator"><font><font>&gt; </font></font></span>
<span class="token operator"><font><font>&lt;</font></font></span><font><font> tipo de script </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"text / javascript"</font></font></span><font><font> src </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"pluginExtension.js" </font></font></span><span class="token operator"><font><font>&gt; </font></font></span><span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> script de </font></font><span class="token operator"><font><font>&gt;</font></font></span><font></font>
<font></font>
<span class="token operator"><font><font>&lt;</font></font></span><font><font> tipo de script </font></font><span class="token operator"><font><font>= </font></font></span><span class="token string"><font><font>"text / javascript" </font></font></span><span class="token operator"><font><font>&gt;</font></font></span><font></font>
<font></font><font><font>
$ </font></font><span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / 'Core' Nosso plugin é exposta sob um namespace núcleo em 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / este exemplo, que primeiro o cache
 </font></font></span>    <span class="token keyword"><font><font>var</font></font></span><font><font> núcleo </font></font><span class="token operator"><font><font>=</font></font></span><font><font> $ </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> núcleo </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Em seguida, use usar alguns dos built-in funcionalidade do núcleo de 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / realçar todas as divs em amarelo na página
</font></font></span><font><font>     principal </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>HighlightAll </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Acesse os plugins (extensões) carregados no 'plug-in'
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / namespace do nosso módulo central:
 </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / Definir o primeiro div na página para ter um fundo verde.
</font></font></span><font><font>     núcleo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> plug-in </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>setGreen </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> "div: em primeiro lugar" </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / Aqui nós estamos fazendo uso do método de núcleo de 'destaque'
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / sob o capô de um plugin carregado depois de ele
 </font></font></span>
   <span class="token comment" spellcheck="true"><font><font>/ / Definir o último div para a propriedade 'errorColor' definido no 
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / nosso módulo core / plugin. </font><font>Se você examinar o código mais abaixo,
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / você vai ver como é fácil consumir as propriedades e métodos
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / entre o núcleo e outros plugins
</font></font></span><font><font>     núcleo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> plug-in </font></font><span class="token punctuation"><font><font>. </font></font></span><span class="token function"><font><font>setRed </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token string"><font><font> 'div: último' </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span><font></font>
    <font></font>
<span class="token operator"><font><font>&lt; </font></font></span><span class="token operator"><font><font>/</font></font></span><font><font> script de </font></font><span class="token operator"><font><font>&gt;</font></font></span></code></pre>
<p><strong><font><font>pluginCore.js</font></font></strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ / Módulo / Plugin núcleo
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Nota: o código de embalagem que você vê ao redor do módulo é o que permite
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / us para suportar múltiplos formatos e especificações de módulos por 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / mapeamento dos argumentos definidos para que um formato específico espera
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / para estar presente. </font><font>Nosso funcionalidade módulo real é definido menor 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / para baixo, onde um módulo chamado e as exportações são demonstrados. 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / 
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Note que as dependências pode facilmente ser declarado, se necessário
 </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / e deve funcionar como demonstrado anteriormente com os exemplos do módulo AMD.
 </font></font></span>
<span class="token punctuation"><font><font>( </font></font></span><span class="token keyword"><font><font>função </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> nome </font></font><span class="token punctuation"><font><font>,</font></font></span><font><font> definição </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span>
  <span class="token keyword"><font><font>var</font></font></span><font><font> theModule </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token function"><font><font>definição </font></font><span class="token punctuation"><font><font>(</font></font></span></span><span class="token punctuation"><font><font> ) </font></font></span><span class="token punctuation"><font><font>, </font></font></span>
     <span class="token comment" spellcheck="true"><font><font>/ / esta é considerada "segura":
</font></font></span><font><font>       hasDefine </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>typeof</font></font></span><font><font> define </font></font><span class="token operator"><font><font>=== </font></font></span> <span class="token string"><font><font>'função' </font></font></span> <span class="token operator"><font><font>&amp;&amp;</font></font></span><font><font> definir </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> amd </font></font><span class="token punctuation"><font><font>, </font></font></span>
     <span class="token comment" spellcheck="true"><font><font>/ / hasDefine = typeof define === 'função' ,
</font></font></span><font><font>       hasExports </font></font><span class="token operator"><font><font>= </font></font></span> <span class="token keyword"><font><font>typeof</font></font></span><font><font> módulo </font></font><span class="token operator"><font><font>! </font></font></span><span class="token operator"><font><font>== </font></font></span> <span class="token string"><font><font>'indefinido' </font></font></span> <span class="token operator"><font><font>&amp;&amp;</font></font></span><font><font> módulo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> exportações </font></font><span class="token punctuation"><font><font>;</font></font></span><font></font>
<font></font>
  <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> hasDefine </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / AMD Module
 </font></font></span>    <span class="token function"><font><font>define </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> theModule </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
  <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> hasExports </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / módulo Node.js
</font></font></span><font><font>     módulo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> exportações </font></font><span class="token operator"><font><font>=</font></font></span><font><font> theModule </font></font><span class="token punctuation"><font><font>; </font></font></span>
  <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Atribuir a namespaces comuns ou simplesmente o objeto global
</font></font></span>    <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span>
  <span class="token punctuation"><font></font></span>
<span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
    <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font>
<font></font>
 <span class="token comment" spellcheck="true"><font><font>/ / Define o módulo de núcleo aqui e voltar a API pública
 </font></font></span>
 <span class="token comment" spellcheck="true"><font><font>/ / Este é o método utilizado pelo destaque HighlightAll core ()
 </font></font></span> <span class="token comment" spellcheck="true"><font><font>/ / método e todos os plugins destacando elementos diferente
 </font></font></span> <span class="token comment" spellcheck="true"><font><font>/ /
</font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
    <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
      <span class="token function"><font></font><span class="token punctuation"><font></font></span></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
    <span class="token punctuation"><font></font></span>
  <span class="token punctuation"><font></font></span>
  <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
      <span class="token punctuation"><font></font></span>
  <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><strong><font><font>pluginExtension.js</font></font></strong></p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment" spellcheck="true"><font><font>/ / Extensão de módulo
</font></font></span>
<span class="token punctuation"><font></font></span><span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
    <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span><span class="token operator"><font></font></span> <span class="token string"><font></font></span> <span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font>
<font></font>
    <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> hasDefine </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / AMD Module
 </font></font></span>        <span class="token function"><font><font>define </font></font><span class="token punctuation"><font><font>(</font></font></span></span><font><font> theModule </font></font><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token keyword"><font><font>se </font></font></span> <span class="token punctuation"><font><font>(</font></font></span><font><font> hasExports </font></font><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / módulo Node.js
</font></font></span><font><font>         módulo </font></font><span class="token punctuation"><font><font>.</font></font></span><font><font> exportações </font></font><span class="token operator"><font><font>=</font></font></span><font><font> theModule </font></font><span class="token punctuation"><font><font>; </font></font></span>
    <span class="token punctuation"><font><font>} </font></font></span> <span class="token keyword"><font><font>mais </font></font></span> <span class="token punctuation"><font><font>{ </font></font></span><span class="token comment" spellcheck="true"><font><font>/ / Atribuir a namespaces comuns ou simplesmente o objeto global (janela)
</font></font></span><font></font>
<font></font>
       <span class="token comment" spellcheck="true"><font><font>/ / Conta para o módulo flat-file/global
</font></font></span>        <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token keyword"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token function"><font></font><span class="token punctuation"><font></font></span></span><span class="token string"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token number"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
            <span class="token keyword"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
            <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span> <span class="token number"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span>
            <span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span> <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><span class="token keyword"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token operator"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token operator"><font></font></span> <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
            <span class="token punctuation"><font></font></span><font></font><span class="token operator"><font></font></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token punctuation"><font></font></span><font></font>
<font></font>
    <span class="token punctuation"><font><font>} </font></font></span>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>( </font></font></span><span class="token string"><font><font>'core.plugin' </font></font></span><span class="token punctuation"><font><font>, </font></font></span> <span class="token keyword"><font><font>a função </font></font></span> <span class="token punctuation"><font><font>( </font></font></span><span class="token punctuation"><font><font>) </font></font></span> <span class="token punctuation"><font><font>{</font></font></span><font></font>
<font></font>
   <span class="token comment" spellcheck="true"><font><font>/ / Define o módulo aqui e voltar a API pública.
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / Este código pode ser facilmente adaptado com o núcleo
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / permitir métodos que substituem e estender a funcionalidade do núcleo
 </font></font></span>   <span class="token comment" spellcheck="true"><font><font>/ / a fim de expandir o método de destaque para fazer mais, se você
</font></font></span>    <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
            <span class="token function"><font></font><span class="token punctuation"><font></font></span></span><font></font><span class="token punctuation"><font></font></span> <span class="token string"><font></font></span><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token keyword"><font></font></span> <span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span> <span class="token punctuation"><font></font></span>
            <span class="token function"><font></font><span class="token punctuation"><font></font></span></span><font></font><span class="token punctuation"><font></font></span><font></font><span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span>
        <span class="token punctuation"><font></font></span>
    <span class="token punctuation"><font></font></span><span class="token punctuation"><font></font></span><font></font>
<font></font>
<span class="token punctuation"><font><font>} </font></font></span><span class="token punctuation"><font><font>) </font></font></span><span class="token punctuation"><font><font>;</font></font></span></code></pre>
<p><font><font>Enquanto isso está além do escopo deste artigo, você deve ter notado que os diferentes tipos de </font></font><code><font><font>exigir</font></font></code><font><font> métodos foram mencionados quando discutimos AMD e CommonJS.</font></font></p>
<p><font><font>A preocupação com a convenção de nomenclatura semelhante, é claro, a confusão, ea comunidade está dividida sobre os méritos de um mundial </font></font><code><font><font>exigem</font></font></code><font><font> função. </font><font>A sugestão de John Hann aqui é que, em vez de chamá-lo de </font></font><code><font><font>exigir</font></font></code><font><font> , o que provavelmente não seria suficiente para informar os usuários sobre a diferença entre um global e interno </font></font><code><font><font>exigem</font></font></code><font><font> , renomeando o mundial carregador método outra coisa poderia fazer mais sentido (como o nome da biblioteca). </font><font>Por esta razão, curl.js usa </font></font><code><font><font>enrolar</font></font></code><font><font> e RequireJS usa </font></font><code><font><font>RequireJS</font></font></code><font><font> .</font></font></p>
<p><font><font>Esta é provavelmente uma discussão maior para outro dia, mas eu espero que esta breve explicação de ambos os tipos de módulos aumentou sua consciência desses formatos e tem encorajado a continuar a explorar e experimentar com eles em seus apps.</font></font></p>
<h4><font><font>Leitura</font></font></h4>
<ul>
<li><font><font>" </font></font><a href="http://unscriptable.com/code/Using-AMD-loaders/#0"><font><font>Usando AMD Carregadores para escrever e gerenciar JavaScript Modular</font></font></a><sup class="print_only"> 31</sup><font><font> ", John Hann</font></font></li>
<li><font><font>" </font></font><a href="http://dailyjs.com/2010/10/18/modules/"><font><font>Desmistificando Módulos CommonJS</font></font></a><sup class="print_only"> 32</sup><font><font> ", Alex Young</font></font></li>
<li><font><font>" </font></font><a href="http://unscriptable.com/index.php/2011/09/22/amd-module-patterns-singleton/"><font><font>AMD Padrões Módulo: Singleton</font></font></a><sup class="print_only"> 33</sup><font><font> , "John Hann</font></font></li>
<li><a href="https://github.com/addyosmani/jquery-plugin-patterns/issues/1"><font><font>Discussão atual sobre-fio e AMD módulos de estilo UMD para plugins jQuery</font></font></a><sup class="print_only"> 34</sup><font><font> , GitHub</font></font></li>
<li><font><font>" </font></font><a href="http://www.sitepen.com/blog/2010/09/30/run-anywhere-javascript-modules-boilerplate-code/"><font><font>Run-em qualquer lugar JavaScript Módulos de código clichê</font></font></a><sup class="print_only"> 35</sup><font><font> , "Kris ZYP</font></font></li>
<li><font><font>" </font></font><a href="http://tagneto.blogspot.com/2010/12/standards-and-proposals-for-javascript.html"><font><font>Normas e propostas para módulos e jQuery JavaScript</font></font></a><sup class="print_only"> 36</sup><font><font> ", James Burke</font></font></li>
</ul>
<h3><font><font>O que faz um bom Plugin jQuery?</font></font></h3>
<p><font><font>No final do dia, os padrões são apenas um aspecto do desenvolvimento de encaixe. </font><font>E antes de terminar, aqui estão os meus critérios para a seleção de plugins de terceiros, que esperamos ajudar os desenvolvedores a escrevê-los.</font></font></p>
<p><strong><font><font>Qualidade</font></font></strong><br><font><font> 
Faça o seu melhor para aderir às melhores práticas tanto com o JavaScript e jQuery que você escreve. </font><font>São as suas soluções ideal? </font><font>Será que eles seguem as </font></font><a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines"><font><font>diretrizes jQuery estilo do núcleo</font></font></a><font><font> ? </font><font>Se não, é o seu código, pelo menos relativamente limpo e legível?</font></font></p>
<p><strong><font><font>Compatibilidade</font></font></strong><br><font><font> 
Quais versões do seu plugin jQuery é compatível? </font><font>Já testei com as últimas versões? </font><font>Se o plugin foi escrito antes jQuery 1.6, então ele pode ter problemas com os atributos, porque a forma como nos aproximamos deles mudou com o release. </font><font>Novas versões do jQuery oferecem melhorias e oportunidades para o projeto jQuery para melhorar o que a biblioteca central oferece. </font><font>Com isso vem rupturas ocasionais (principalmente em grandes lançamentos) à medida que avançamos em direção a uma maneira melhor de fazer as coisas. </font><font>Eu gostaria de ver os autores de plugins atualizar seu código quando necessário ou, no mínimo, testar os seus plugins com novas versões para se certificar que tudo funciona como esperado.</font></font></p>
<p><strong><font><font>Confiabilidade</font></font></strong><br><font><font> 
Seu plugin deve vir com seu próprio conjunto de testes de unidade. </font><font>Não só estes provar o seu plugin realmente funciona, mas eles também podem melhorar o design sem quebrá-lo para os usuários finais. </font><font>Eu considero testes unitários essenciais para qualquer plugin jQuery grave que é destinado a um ambiente de produção, e eles não são tão difíceis de escrever. </font><font>Para um excelente guia para testes de JavaScript automatizado com QUnit, você pode estar interessado em " </font></font><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg749824"><font><font>Automatizando Testes JavaScript Com QUnit</font></font></a><font><font> ", por </font></font><a href="http://bassistance.de/"><font><font>Jorn Zaefferer</font></font></a><font><font> .</font></font></p>
<p><strong><font><font>Desempenho</font></font></strong><br><font><font> 
Se o plugin precisa realizar tarefas que exigem muito poder de computação ou fortemente que manipula o DOM, então você deve seguir as melhores práticas que minimizem este. </font><font>Use </font></font><a href="http://jsperf.com/"><font><font>jsPerf.com</font></font></a><font><font> para testar os segmentos do seu código para que você esteja ciente de quão bem ele executa em diferentes navegadores antes de liberar o plugin.</font></font></p>
<p><strong><font><font>Documentação</font></font></strong><br><font><font> 
Se você pretende para outros desenvolvedores para usar o plugin, garantir que ele está bem documentado. </font><font>Documente seu API. </font><font>Quais são os métodos e opções faz o apoio plugin? </font><font>Será que ela tem alguma dicas que os usuários precisam estar ciente de? </font><font>Se os usuários não conseguem descobrir como usar o plugin, eles provavelmente procurar uma alternativa. </font><font>Além disso, fazer o seu melhor para comentar o código. </font><font>Este é de longe o melhor presente que você poderia dar a outros desenvolvedores. </font><font>Se alguém sente que pode navegar a sua base de código bem o suficiente para gastar-lo ou melhorá-lo, então você fez um bom trabalho.</font></font></p>
<p><strong><font><font>Probabilidade de manutenção</font></font></strong><br><font><font> 
Ao liberar um plugin, estimar quanto tempo você terá para se dedicar a manutenção e suporte. </font><font>Todos nós gostamos de partilhar os nossos plugins com a comunidade, mas é preciso definir as expectativas para a sua capacidade de responder a perguntas, resolver questões e fazer melhorias. </font><font>Isso pode ser feito simplesmente por afirmar suas intenções para a manutenção no </font></font><em><font><font>README</font></font></em><font><font> file, e permitir que os usuários decidir se quer fazer correções de si.</font></font></p>
<h4><font><font>Conclusão</font></font></h4>
<p><font><font>Hoje, nós exploramos vários padrões de projeto de economia de tempo e as melhores práticas que podem ser empregadas para melhorar o seu processo de desenvolvimento de plugin. </font><font>Alguns são mais adequados para certos casos de utilização do que outros, mas espero que os comentários de código que discutem os prós e contras dessas variações em plugins populares e widgets foram úteis.</font></font></p>
<p><font><font>Lembre-se, ao selecionar um padrão, ser prático. </font><font>Não use um padrão plug-in apenas para o bem dela, mas sim, passar algum tempo a compreender a estrutura subjacente, e estabelecer o quão bem ele resolve o seu problema ou se encaixa o componente que você está tentando construir. </font><font>Escolha o modelo que melhor se adapte às suas necessidades.</font></font></p>
<p><font><font>E é isso. </font><font>Se há um determinado padrão ou abordagem que você preferir tomar a escrever plugins que você sente iria beneficiar os outros (que não foi coberta), não hesite em colocá-lo em um favor </font></font><a href="http://gist.github.com/"><font><font>essência</font></font></a><font><font> e compartilhá-lo nos comentários abaixo. </font><font>Tenho certeza de que seria apreciada.</font></font></p>
<p><font><font>Até a próxima, codificação felizes!</font></font></p>
<p><em><font><font>Graças a John Hann, Julian Aubourg, Andree Hanson e todos os outros que revisaram este post para seus comentários e feedback.</font></font></em></p>
<p><em><font><font>(Al) (il)</font></font></em></p>
                        	<div id="textadtarget"><script type="text/javascript">// <![CDATA[
                    OA_show("Textad");
            	// ]]> </script><div id="textad"><style>.lead { color: #666;font-size: 0.9em; text-transform:uppercase;font-family:'Proxima Nova Bold', Verdana;letter-spacing:1px;background-color: #fff2cc; border-radius: 4px; padding: 3px 8px; margin-right: 2px; text-decoration: none !important; }</style><p style="padding: 1em 1em 1em 0; margin-top: 1.5em; margin-bottom: 2em; border-radius: 0.4em !important; overflow: hidden; "><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Dlearn-why-smashing-editors-note%26pk_kwd%3DMobileBook" style="border: none;" target="_self"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/mobile-book-opt.png" style="float: left; border-radius: 0.5em; max-width: 16% !important; padding: 0 1.25em 0 0; margin-top: 0;" alt="The Mobile Book"></a> <span style="display: block; overflow: hidden;"><a class="lead" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self"><font><font>O Livro móvel</font></font></a><font><font> Se você está procurando um bom livro sobre Mobile, </font></font><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self"><strong style="font-family: &#39;Proxima Nova Bold&#39;,Arial,serif;"><font><font>esta</font></font></strong></a><font><font> é a única - o nosso livro de capa dura cuidadosamente elaborado com muitas dicas práticas e técnicas. </font><font>A verdadeiramente </font></font><em style="font-style: &#39;Proxima Nova Italic&#39;, Arial, sans-serif;"><font><font>sensacional</font></font></em><font><font> livro sobre tudo o que você precisa saber sobre Mobile hoje. </font></font><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6124__zoneid=68__OXLCA=1__cb=ef0958019b__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fthe-mobile-book.html%3Fpk_campaign%3Deditors-note-learn-why-mobile-book%26pk_kwd%3Dfirst-link" style="text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,0.1);" target="_self"><strong style="font-family: &#39;Proxima Nova Bold&#39;,Arial,serif;"><font><font>obter o livro Mobile.</font></font></strong></a></span></p><div id="beacon_ef0958019b" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(1).php" alt="" style="width: 0px; height: 0px;"></div></div>
</div>
	                    <div class="tagsdata">
            <p class="tags longtags"><strong><font><font>Tags: </font></font></strong><a href="http://coding.smashingmagazine.com/tag/jquery/" title="View all articles tagged &#39;JQuery&#39; (23)"><font><font>JQuery</font></font></a></p>            <p><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="backtotop single" title="Jump to the top of the page"><font><font>↑ voltar ao topo </font></font></a><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F10%2F11%2Fessential-jquery-plugin-patterns%2F&source=tweetbutton&text=Essential%20jQuery%20Plugin%20Patterns&url=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F10%2F11%2Fessential-jquery-plugin-patterns%2F&via=smashingmag" class="share-on-twitter single" title="Share on Twitter!"><font><font>Share on Twitter</font></font></a></p>
        </div>
    </article><ul class="print_only_notelist"><li><h4>Footnotes:</h4></li><li><sup>0</sup> Addy Osmani - http://coding.smashingmagazine.com/author/addy-osmani/?rel=author</li><li><sup>1</sup> JQuery - http://coding.smashingmagazine.com/tag/jquery/</li><li><sup>2</sup> Plugins/Authoring - http://docs.jquery.com/Plugins/Authoring</li><li><sup>3</sup> Signs of a Poorly Written jQuery Plugin - http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/</li><li><sup>4</sup> How to Create Your Own jQuery Plugin - http://msdn.microsoft.com/en-us/scriptjunkie/ff608209</li><li><sup>5</sup> Style in jQuery Plugins and Why It Matters - http://msdn.microsoft.com/en-us/scriptjunkie/ff696759</li><li><sup>6</sup> Create Your First jQuery Plugin, Part 2 - http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/</li><li><sup>7</sup> The jQuery UI Widget Factory - http://ajpiano.com/widgetfactory/#slide1</li><li><sup>8</sup> Introduction to Stateful Plugins and the Widget Factory - http://msdn.microsoft.com/en-us/scriptjunkie/ff706600</li><li><sup>9</sup> Widget Factory - http://wiki.jqueryui.com/w/page/12138135/Widget factory</li><li><sup>10</sup> Understanding jQuery UI Widgets: A Tutorial - http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/</li><li><sup>11</sup> Namespacing in JavaScript - http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/</li><li><sup>12</sup> Use Your $.fn jQuery Namespace - http://ryanflorence.com/use-your-fn-jquery-namespace/</li><li><sup>13</sup> JavaScript Namespacing - http://michaux.ca/articles/javascript-namespacing</li><li><sup>14</sup> Modules and namespaces in JavaScript - http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html</li><li><sup>15</sup> Communication Between jQuery UI Widgets - http://www.devpatch.com/2010/03/communication-between-jquery-ui-widgets/</li><li><sup>16</sup> Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability - http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx</li><li><sup>17</sup> Using Inheritance Patterns To Organize Large jQuery Applications - http://alexsexton.com/?p=51</li><li><sup>18</sup> How to Manage Large Applications With jQuery or Whatever - http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps</li><li><sup>19</sup> Practical Example of the Need for Prototypal Inheritance - http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html</li><li><sup>20</sup> Prototypal Inheritance in JavaScript - http://javascript.crockford.com/prototypal.html</li><li><sup>21</sup> Using $.widget.bridge Outside of the Widget Factory - http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/</li><li><sup>22</sup> Using RequireJS with jQuery - http://jqfundamentals.com/book/index.html#example-10.5</li><li><sup>23</sup> Fast Modular Code With jQuery and RequireJS - http://speakerrate.com/talks/2983-fast-modular-code-with-jquery-and-requirejs</li><li><sup>24</sup> jQuery’s Best Friends     - http://jquerysbestfriends.com/#slide1</li><li><sup>25</sup> Managing Dependencies With RequireJS - http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html</li><li><sup>26</sup> jQuery Pluginization - http://benalman.com/talks/jquery-pluginization.html</li><li><sup>27</sup> accompanying gist - https://gist.github.com/472783/e8bf47340413129a8abe5fac55c83336efb5d4e1</li><li><sup>28</sup> Creating Highly Configurable jQuery Plugins - http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/</li><li><sup>29</sup> Writing Highly Configurable jQuery Plugins, Part 2 - http://markdalgleish.com/2011/09/html5data-creating-highly-configurable-jquery-plugins-part-2/</li><li><sup>30</sup> Using AMD Loaders to Write and Manage Modular JavaScript - http://unscriptable.com/code/Using-AMD-loaders/#0</li><li><sup>31</sup> Demystifying CommonJS Modules - http://dailyjs.com/2010/10/18/modules/</li><li><sup>32</sup> AMD Module Patterns: Singleton - http://unscriptable.com/index.php/2011/09/22/amd-module-patterns-singleton/</li><li><sup>33</sup> Current discussion thread about AMD- and UMD-style modules for jQuery plugins - https://github.com/addyosmani/jquery-plugin-patterns/issues/1</li><li><sup>34</sup> Run-Anywhere JavaScript Modules Boilerplate Code - http://www.sitepen.com/blog/2010/09/30/run-anywhere-javascript-modules-boilerplate-code/</li><li><sup>35</sup> Standards And Proposals for JavaScript Modules And jQuery - http://tagneto.blogspot.com/2010/12/standards-and-proposals-for-javascript.html</li></ul>	
    <div class="bio clearfix">
        <div class="gravatar">
            <img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275" class="avatar avatar-78 photo">        </div>
        <div class="about">
            <a rel="author" href="http://coding.smashingmagazine.com/author/addy-osmani/?rel=author" title="Posts by Addy Osmani" class="post-author"><font><font>Addy Osmani</font></font></a>            <p><font><font>Addy Osmani é um Programas desenvolvedor engenheiro da equipe do Google Chrome. </font><font>Um desenvolvedor de JavaScript apaixonado, ele escreveu livros open-source como "Aprender JavaScript Design Patterns" e "Desenvolvimento de Aplicações Backbone", tendo também contribuído para projetos open-source como o Modernizr e jQuery. </font><font>Ele está atualmente trabalhando em "Yeoman '- um fluxo de trabalho opinativo para a construção de belas aplicações.</font></font></p>
        </div>
    </div>
            
        <div class="related-articles">
            <h2><font><font>Artigos Relacionados</font></font></h2>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://coding.smashingmagazine.com/2011/07/15/orbit-and-reveal-jquery-plug-ins-that-will-breathe-life-into-your-pages/" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/related-131.jpg" alt="Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows"></a>
                        <h3><a href="http://coding.smashingmagazine.com/2011/07/15/orbit-and-reveal-jquery-plug-ins-that-will-breathe-life-into-your-pages/"><font><font>Orbit e revelar: jQuery plug-ins para Sliders imagem e janelas modais</font></font></a></h3>
                    </div>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/related-posts-099.jpg" alt="Make Your Own Bookmarklets With jQuery"></a>
                        <h3><a href="http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/"><font><font>Faça seus próprios Bookmarklets Com jQuery</font></font></a></h3>
                    </div>                                        <div class="related-article clearfix">
                        <a class="post-picture" href="http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/related-182.jpg" alt="Showcase of Creative Navigation Menus: Good and Bad Examples"></a>
                        <h3><a href="http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/"><font><font>Showcase de menus de navegação criativas: bons e maus exemplos</font></font></a></h3>
                    </div>        </div>
        
<!-- Smashing Magazine - Comment spnsr ed spot -->

<div class="newsletter-advertisement">
	<div id="mc_embed_signup" class="sm-search">
		<p><font><font>Toda segunda quinta-feira enviamos nossa linda </font></font><strong><font><font>newsletter</font></font></strong><font><font> com dicas e técnicas úteis, artigos recentes e os próximos eventos. </font><font>Milhares de leitores já se inscreveram. </font><font>Por que você não se inscrever, também, e obter um </font></font><strong><font><font>eBook Smashing livre</font></font></strong><font><font> também?</font></font></p>
		<form action="http://smashingmagazine.us1.list-manage1.com/subscribe/post?u=16b832d9ad4b28edf261f34df&id=a1666656e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
			<input name="EMAIL" type="text" placeholder="email address">
			<button class="search_submit" type="submit"><span class="first-type"><font><font>Inscreva-se!</font></font></span></button>
			<div class="clearfix">
				<div class="num-subscribers"><script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/subscriber-count"></script><div class="mc-badge mc-badge05 mc-badge05-sub04" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;width: auto;display: inline-block;">	<p style="color: #e95c41;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;line-height: 1em;width: auto;max-width: 195px;"><span class="subscriber-count" style="display: block;float: left;padding-top: 0px;background-color: #e95c41;color: #fff;padding: 4px 6px;line-height: 1em;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;font-size: 14px;margin-right: 5px;border-top: 1px solid #983c2a;"><font><font>159.512 </font></font></span> <span style="display: block;float: left;padding-top: 0px;"><font><font>subscritores </font></font></span> <a href="http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&utm_medium=email&utm_campaign=monkey_rewards&aid=16b832d9ad4b28edf261f34df&afl=1" target="_blank" class="powered-by" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;background: transparent url(http://gallery.mailchimp.com/089443193dd93823f3fed78b4/images/powered_by_mailchimp01.png) 50% bottom no-repeat;display: block;height: 15px;width: 113px;text-indent: -9999px;float: left;padding-top: 0px;"><font><font>e-mail marketing alimentado por MailChimp</font></font></a></p></div></div>
			</div>
		</form>
	</div>
</div>

<a id="comments"></a>

<ul class="sub-tabs clearfix">
    <li><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#show-comments" class="active"><font><font>51 comentários</font></font></a></li>
    <li><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#best-comments"><font><font>Melhores Comentários</font></font></a></li></ul>

<div id="discussion" class="subtab-pages">
    <div id="show-comments" style="display: block;">
                <ol id="comments-overview" class="commentlist">
                <li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>1</font></font></span>
    <div class="comment" id="comment-550347">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/2f2c0f30424ba20b3315ec05d177d493" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Burak Erdem</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550347"><font><font>11 de outubro de 2011 05:47</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Um dos artigos mais descritivas que eu já li sobre os padrões do jQuery e plugin. </font><font>Obrigado ...</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550347#respond" onclick="return addComment.moveForm(&quot;comment-550347&quot;, &quot;550347&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+30</font></font></div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber"><font><font>2</font></font></span>
    <div class="comment" id="comment-550353">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Addy Osmani</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550353"><font><font>11 de outubro de 2011 06:48</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>É o meu prazer! </font><font>Espero que este post vem a ser útil :)</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550353#respond" onclick="return addComment.moveForm(&quot;comment-550353&quot;, &quot;550353&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>9</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>3</font></font></span>
    <div class="comment" id="comment-550352">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5c4a839c1766f8160f9b3792eac22e53" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Thomas Strobl</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550352"><font><font>11 de outubro de 2011 06:46</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Muito detalhado e muito útil. </font><font>Obrigado!</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550352#respond" onclick="return addComment.moveForm(&quot;comment-550352&quot;, &quot;550352&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>4</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>4</font></font></span>
    <div class="comment" id="comment-550355">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/316af5a02714c7a6c1e64666f45b09d8" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Ralph</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550355"><font><font>11 de outubro de 2011 07:02</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>OMG ... isso é um longo artigo maciça. </font><font>Não que eu entendi muito dele :) (js / jQuery peitoril parece assustador para mim), mas eu acho que é ótimo que as pessoas tomam o tempo para colocar esse artigo detalhado em conjunto para que outros possam aprender. </font><font>Thumbs up!</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550355#respond" onclick="return addComment.moveForm(&quot;comment-550355&quot;, &quot;550355&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>5</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>5</font></font></span>
    <div class="comment" id="comment-550356">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/55f0869695ac25255772583e9e1ec78a" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Nick Mason</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550356"><font><font>11 de outubro de 2011 07:11</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Extremamente bem feito artigo. </font><font>Obrigado pela postagem e compreensão.</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550356#respond" onclick="return addComment.moveForm(&quot;comment-550356&quot;, &quot;550356&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>3</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>6</font></font></span>
    <div class="comment" id="comment-550358">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/85b55e2947ea2e426de6294a88c29c36" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>djheru</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550358"><font><font>11 de outubro de 2011 07:30</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Excelente escrita, exemplos úteis, ea mistura perfeita de conteúdo básico e avançado. </font><font>Este é um dos melhores tutoriais on-line que eu li em muito tempo, e eu li um monte deles. </font><font>Você deve estar trabalhando para Lynda ou Khan.</font></font></p>
<p><font><font>Espero ver mais de você em breve.</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550358#respond" onclick="return addComment.moveForm(&quot;comment-550358&quot;, &quot;550358&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+1</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>7</font></font></span>
    <div class="comment" id="comment-550360">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5ed4a08270923c8c04d0736490e34271" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Ankit Singhal</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550360"><font><font>11 de outubro de 2011 07:37</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Excelente artigo ... bem descrito.</font></font></p>
<p><font><font>Obrigado.</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550360#respond" onclick="return addComment.moveForm(&quot;comment-550360&quot;, &quot;550360&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+1</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>8</font></font></span>
    <div class="comment" id="comment-550366">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/10ad57ef06737f2e10a454826554fb6b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Cristão</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550366"><font><font>11 de outubro de 2011 09:39</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Uau! </font><font>Great!</font></font></p>
<p><font><font>Precisam ser lidos novamente para oin para ser bem compreendida, mas é um grande artigo ...</font></font></p>
<p><font><font>Como parece fácil de construir um plugin jQuery! </font><font>;)</font></font></p>
<p><font><font>Parabéns.</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550366#respond" onclick="return addComment.moveForm(&quot;comment-550366&quot;, &quot;550366&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>2</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>9</font></font></span>
    <div class="comment" id="comment-550371">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5a39b8e048d7ca23ba3e43110975bd4a" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>David Corbacho</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550371"><font><font>11 de outubro de 2011 11:14</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Addy, este não é um artigo, este deve ser um capítulo de livro. </font><font>Bom conteúdo</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550371#respond" onclick="return addComment.moveForm(&quot;comment-550371&quot;, &quot;550371&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+10</font></font></div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber"><font><font>10</font></font></span>
    <div class="comment" id="comment-550372">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Addy Osmani</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550372"><font><font>11 de outubro de 2011 11:17</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Você é muito gentil :) Algumas dessas pode muito bem acabar no JavaScript padrões de design livro que eu estou trabalhando para O'Reilly no momento. </font><font>Estou contente se ele vem em útil com qualquer outra pessoa projetos para agora.</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550372#respond" onclick="return addComment.moveForm(&quot;comment-550372&quot;, &quot;550372&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+1</font></font></div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber"><font><font>11</font></font></span>
    <div class="comment" id="comment-551385">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/1acadca974fd34be7c06838a5634063b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>TG</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551385"><font><font>19 de outubro de 2011 21:30</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Se você está escrevendo um livro sobre padrões para O'Reilly ... Impressionante! </font><font>Stoyan Stefanov de 'Padrões Javascript "é muito, muito bom - e entre o dois de você que seria perfeito. </font><font>Estive lendo o que eu puder de ambos. </font><font>Quando é seu prevista para ser concluída?</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551385#respond" onclick="return addComment.moveForm(&quot;comment-551385&quot;, &quot;551385&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+1</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber"><font><font>12</font></font></span>
    <div class="comment" id="comment-550500">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b73f3f00543952478ad7947f31d5e7d7" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Marco Barbosa</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550500"><font><font>12 out 2011 07:44</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Concordou. </font><font>Este foi um excelente capítulo de livro de leitura :)</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550500#respond" onclick="return addComment.moveForm(&quot;comment-550500&quot;, &quot;550500&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>+1</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>13</font></font></span>
    <div class="comment" id="comment-550374">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/0ff9c3a23e73d87375f89ab6ccf62e31" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Geert-Jan Brits</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550374"><font><font>11 de outubro de 2011 12:00</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Peça muito profunda! </font><font>Lufada de ar fresco, onde parece popular hoje em dia para postar apenas peças 'soundsbite ". </font><font>Particularmente gostei do seu raciocínio por trás dos padrões, em vez de apenas mostrar o resultado final, bem como a maneira em que os padrões são introduzidos gradualmente e construir em cima. </font><font>Em suma: Favorito!</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550374#respond" onclick="return addComment.moveForm(&quot;comment-550374&quot;, &quot;550374&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>2</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>14</font></font></span>
    <div class="comment" id="comment-550375">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7ea5bce168f688e532f705e2f20c54f1" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Mike Petrovich</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550375"><font><font>11 de outubro de 2011 12:04</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Maravilhosamente artigo informativo! </font><font>"Newcomer Brilhante" indeed :)</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550375#respond" onclick="return addComment.moveForm(&quot;comment-550375&quot;, &quot;550375&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>2</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>15</font></font></span>
    <div class="comment" id="comment-550391">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/39570a104ac68d796a44fa9423c14f3e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Andres Valencia</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550391"><font><font>11 de outubro de 2011 02:11</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Graças Addy, artigo foda!</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550391#respond" onclick="return addComment.moveForm(&quot;comment-550391&quot;, &quot;550391&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>3</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber"><font><font>16</font></font></span>
    <div class="comment" id="comment-550403">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/38f89c46ae31ab1ed90c5b662385fe12" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Ahmed El Sokkary</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550403"><font><font>11 de outubro de 2011 18:28</font></font></a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p><font><font>Muito útil, eu não acho que há um artigo que li antes que cobria plugins jQuery que forma, obrigado novamente e mais uma vez :)</font></font></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550403#respond" onclick="return addComment.moveForm(&quot;comment-550403&quot;, &quot;550403&quot;, &quot;respond&quot;, &quot;115389&quot;)"><font><font>Responder</font></font></a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive"><font><font>2</font></font></div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber"><font><font>17</font></font></span>
    <div class="comment" id="comment-550412">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/62eb687d6d74d8834935a2336eb465b2" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author"><font><font>Erminio Ottone</font></font></h3> 
        		<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550412">October 11th, 2011 7:02 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>That’s what i hate about js: we need to know too many pattern for doing stuff. </p>
<p>btw, i love addy’s articles, maybe verbose some time but i think they are the best modern js resource on the web. Looking forward for you o’reilly book! when it will be out?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550412#respond" onclick="return addComment.moveForm(&quot;comment-550412&quot;, &quot;550412&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">18</span>
    <div class="comment" id="comment-550445">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550445">October 12th, 2011 5:19 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thanks.</p>
<p>The great thing about JavaScript is that it enables you to keep the structures you use as modules or plugins as complex or as simple as you’d like. It’s true that there are a ton of ways you could be doing any of the above, but rather than expecting a developer to learn these off, I would just say..find one that seems to fit what you’re after and go with it. If it doesn’t work out, try something else. </p>
<p>There isn’t a solid ETA on my O’Reilly book just yet, but we’ll probably target summer 2012 or before then for something that’s finalized. Hope that helps!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550445#respond" onclick="return addComment.moveForm(&quot;comment-550445&quot;, &quot;550445&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+4</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">19</span>
    <div class="comment" id="comment-550426">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/e1852bbca35effbadad683dfc990659c" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">CEA</h3> 
        		<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550426">October 12th, 2011 12:34 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Cheers for this post which is extremly usefull</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550426#respond" onclick="return addComment.moveForm(&quot;comment-550426&quot;, &quot;550426&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">20</span>
    <div class="comment" id="comment-550433">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/187a98804b9bc8a62fcffa3e7300f150" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">mikaweb</h3> 
        		<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550433">October 12th, 2011 2:13 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Brilliant!<br>
Well documented, it’s gonna help me a lot.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550433#respond" onclick="return addComment.moveForm(&quot;comment-550433&quot;, &quot;550433&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">21</span>
    <div class="comment" id="comment-550547">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7d00dc7bc83cb8fd9bb502db7d4eda30" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Finn</h3> 
        		<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550547">October 12th, 2011 2:19 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Wow, I thought I would know how to develop a jQuery plugin – but now I know that I don’t know anything… ;)</p>
<p>Thanks, well done!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550547#respond" onclick="return addComment.moveForm(&quot;comment-550547&quot;, &quot;550547&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">22</span>
    <div class="comment" id="comment-550579">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy Osmani</h3> 
        		<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550579">October 12th, 2011 8:14 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>You are all very welcome :) Please do feel free to let me know if you’re uncertain about anything in the post and I’ll happily expand on it.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550579#respond" onclick="return addComment.moveForm(&quot;comment-550579&quot;, &quot;550579&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">23</span>
    <div class="comment" id="comment-550552">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/e474bf34ede6eb79e14fcfc79adc0375" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">balanza</h3> 
        		<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550552">October 12th, 2011 3:15 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>addy osmani…. this guy is a code-machine!</p>
<p>thumb up</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550552#respond" onclick="return addComment.moveForm(&quot;comment-550552&quot;, &quot;550552&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">24</span>
    <div class="comment" id="comment-550564">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b28d62703b9048a618e980ba69369460" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sam</h3> 
        		<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550564">October 12th, 2011 6:36 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Nice work Addy!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550564#respond" onclick="return addComment.moveForm(&quot;comment-550564&quot;, &quot;550564&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">25</span>
    <div class="comment" id="comment-550707">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/654082a9f3c9093064ce4c71990ca15f" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">John Neil</h3> 
        		<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550707">October 14th, 2011 4:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Really really nice work here and at jQuery Boilerplate!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550707#respond" onclick="return addComment.moveForm(&quot;comment-550707&quot;, &quot;550707&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">26</span>
    <div class="comment" id="comment-550733">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7d8d53be7476d9e29a0aeeba33876f11" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Cory Dorning</h3> 
        		<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550733">October 14th, 2011 7:18 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Question…is there a need to pass window and document if your plugin isn’t using them? Seems like doing so would be counter intuitive…thoughts?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550733#respond" onclick="return addComment.moveForm(&quot;comment-550733&quot;, &quot;550733&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-2 clearfix ">
    <span class="commentnumber">27</span>
    <div class="comment" id="comment-551620">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551620">October 21st, 2011 12:13 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Cory. If you 100% aren’t planning on using references to window or document in your plugin, you don’t need to pass those. They’re really just there as a demonstration of best practices for those that do need to.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551620#respond" onclick="return addComment.moveForm(&quot;comment-551620&quot;, &quot;551620&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">28</span>
    <div class="comment" id="comment-550765">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/679f62d3c4b019ceaee5fd981638ad85" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Gueno</h3> 
        		<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550765">October 14th, 2011 1:31 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Bookmarked ;)<br>
Thank you for this great article !</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550765#respond" onclick="return addComment.moveForm(&quot;comment-550765&quot;, &quot;550765&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+1</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">29</span>
    <div class="comment" id="comment-550918">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/25a1cbed2e4e537d811c0571bfc9fc8d" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Jason</h3> 
        		<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550918">October 16th, 2011 3:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>very nice…THX</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=550918#respond" onclick="return addComment.moveForm(&quot;comment-550918&quot;, &quot;550918&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-even depth-1 clearfix ">
    <span class="commentnumber">30</span>
    <div class="comment" id="comment-551147">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7602e4ebbfcfa32a42e5300d68744179" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Sanjay</h3> 
        		<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551147">October 18th, 2011 12:31 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Addy!</p>
<p>Nice post! but you should intend how to use these plugins. How can we call it in a DOM. That made it perfect</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551147#respond" onclick="return addComment.moveForm(&quot;comment-551147&quot;, &quot;551147&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">31</span>
    <div class="comment" id="comment-551179">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/c3b4e790530f7a348b84746e37b8a05f" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">fwolf</h3> 
        		<span class="datetime"><a title="Commentlink #31" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551179">October 18th, 2011 7:08 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Personally I’m avoiding the $-alias like the plague – if you ever had to fight with a site which had several frameworks integrated and ALL of them trying to rely on the $-alias, AND couldn’t just get rid of those other frameworks, you know: Never EVER again – no matter how nice patterns seem to be.</p>
<p>cu, w0lf</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551179#respond" onclick="return addComment.moveForm(&quot;comment-551179&quot;, &quot;551179&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">32</span>
    <div class="comment" id="comment-551621">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #32" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551621">October 21st, 2011 12:14 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>There are a number of ways of working around that from custom-aliasing jQuery to use something other than the dollar sign to better subclassing. Agreed that it can be a painful experience when a lot of other scripts and frameworks are trying to overwrite that namespace, but (with some effort) it’s a problem that can be worked around.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551621#respond" onclick="return addComment.moveForm(&quot;comment-551621&quot;, &quot;551621&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">33</span>
    <div class="comment" id="comment-551293">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tyler Mulligan</h3> 
        		<span class="datetime"><a title="Commentlink #33" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551293">October 19th, 2011 9:31 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great article.  I love that you went more in-depth with these. I found the rewrite on <a href="http://www.jqueryboilerplate.com/" rel="nofollow">http://www.jqueryboilerplate.com</a> the other day and was curious to know more. Thanks for explaining.  However, it was a bit off-putting that you didn’t include usage examples.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551293#respond" onclick="return addComment.moveForm(&quot;comment-551293&quot;, &quot;551293&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+2</div>         		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">34</span>
    <div class="comment" id="comment-551623">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Addy</h3> 
        		<span class="datetime"><a title="Commentlink #34" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551623">October 21st, 2011 12:17 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hey Tyler. The main reason for not including usage examples was really down to two factors. </p>
<p>1) If you’ve been developing plugins for a while, you’re likely to already know how to use the patterns included in this post to instantiate instances of your plugins .</p>
<p>2) time – ideally, usage would (and really, should) be shown, but this is something I intend on addressing at a later point in a beginners guide on the repository for the patterns that covers usage examples for each one. It’s on my todo list :)</p>
<p>Hopefully 2) will provide a solution for what you’re after.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551623#respond" onclick="return addComment.moveForm(&quot;comment-551623&quot;, &quot;551623&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment even depth-3 clearfix ">
    <span class="commentnumber">35</span>
    <div class="comment" id="comment-551627">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tyler Mulligan</h3> 
        		<span class="datetime"><a title="Commentlink #35" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551627">October 21st, 2011 12:53 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I was able to figure it out after a few attempts but even as an experienced developer working with new paradigms can sometimes be confusing.  The examples just help take the stress out :)</p>
<p>I appreciate all your work so far and just to reiterate, thanks for the article, really helped me wrap my head around the different techniques and explain some more concepts to my developers.</p>
<p>Cheers</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551627#respond" onclick="return addComment.moveForm(&quot;comment-551627&quot;, &quot;551627&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">36</span>
    <div class="comment" id="comment-551457">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b11cec1c466bb0f8149ee8cd38cf2d90" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Gary</h3> 
        		<span class="datetime"><a title="Commentlink #36" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551457">October 20th, 2011 7:52 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Great job, as always, Addy. I learn so much from reading your articles, and realize how much more I need to learn (not so happy about that!).</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551457#respond" onclick="return addComment.moveForm(&quot;comment-551457&quot;, &quot;551457&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		 <div class="rateresult positive">+3</div>         		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">37</span>
    <div class="comment" id="comment-551631">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/61c7422473cb7f2ab15d5589103e4482" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rachit</h3> 
        		<span class="datetime"><a title="Commentlink #37" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551631">October 21st, 2011 2:00 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>This is brilliant Addy!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=551631#respond" onclick="return addComment.moveForm(&quot;comment-551631&quot;, &quot;551631&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">38</span>
    <div class="comment" id="comment-561479">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/1ecbc1b13809d5835885f2de64b4b9cb" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ryan</h3> 
        		<span class="datetime"><a title="Commentlink #38" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-561479">December 9th, 2011 10:46 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>For the “Prototypal Inheritance With The DOM-To-Object Bridge Pattern” example wouldn’t it be best to wrap the entire thing in:</p>
<p>;(function($, window, document, undefined) {<br>
// example code.<br>
})(jQuery, window, document);</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=561479#respond" onclick="return addComment.moveForm(&quot;comment-561479&quot;, &quot;561479&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">39</span>
    <div class="comment" id="comment-577121">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/c149431d7c92b7af13ad0c23b4fddb9e" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Darryl</h3> 
        		<span class="datetime"><a title="Commentlink #39" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-577121">April 13th, 2012 12:38 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I’ve read a *lot* of plugin authoring articles in the last few days in order to learn good patterns and strategies. This is by far THE BEST article I’ve read to date. Well done Addy! Excellent job! Thank you. So much makes sense to me now, including the always puzzling leading ‘;’ at the beginning of the plugin.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=577121#respond" onclick="return addComment.moveForm(&quot;comment-577121&quot;, &quot;577121&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">40</span>
    <div class="comment" id="comment-600289">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/866bd5cf066ac2959a7d53c91ac68991" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Trev</h3> 
        		<span class="datetime"><a title="Commentlink #40" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-600289">August 17th, 2012 11:36 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Given I’m quite new to JS and jQuery plugin dev. but I’d really appreciate some extra detail in regards to the lightweight boilerplate.</p>
<p>A few Qs<br>
- Where would I ideally place private and public functions in this code structure?<br>
- Why does your namespaced boilerplate not include your lightweight boilerplate?</p>
<p>Cheers, and great article!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=600289#respond" onclick="return addComment.moveForm(&quot;comment-600289&quot;, &quot;600289&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">41</span>
    <div class="comment" id="comment-613602">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/fa9db3dd46e94d438970dec7e8241eaa" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Santhanam</h3> 
        		<span class="datetime"><a title="Commentlink #41" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-613602">September 26th, 2012 11:20 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>This is awesome.!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=613602#respond" onclick="return addComment.moveForm(&quot;comment-613602&quot;, &quot;613602&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">42</span>
    <div class="comment" id="comment-617024">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/84028d8546cc12fcb9c1d82d677691c6" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Tee Lewis</h3> 
        		<span class="datetime"><a title="Commentlink #42" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-617024">October 6th, 2012 6:10 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>For the namespacing example above, why is this line needed?<br>
base.myFunctionParam = myFunctionParam;</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=617024#respond" onclick="return addComment.moveForm(&quot;comment-617024&quot;, &quot;617024&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">43</span>
    <div class="comment" id="comment-619088">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/4079fe59171bc52305dc1de73fd09aff" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Rob</h3> 
        		<span class="datetime"><a title="Commentlink #43" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-619088">October 16th, 2012 11:34 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>That’s a long article, for anyone who wants the short version on jQuery plugin development check out this:</p>
<p><a href="http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate" rel="nofollow">http://www.websanova.com/tutorials/jquery/jquery-plugin-development-boilerplate</a></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=619088#respond" onclick="return addComment.moveForm(&quot;comment-619088&quot;, &quot;619088&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">44</span>
    <div class="comment" id="comment-619601">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/c34e6769ed7506a59fae5f392966ea73" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Shelley Charles</h3> 
        		<span class="datetime"><a title="Commentlink #44" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-619601">October 22nd, 2012 11:57 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I’ve managed to build a fairly complex plugin with your first example ‘A Lightweight Start’.</p>
<p>With this set-up, is it possible to change a default setting from outside the plugin?  For example, clicking a link on the page?</p>
<p>I’ve seen the $.data reference, but I’m not quite sure if this model supports getting or setting the plugin’s options on the fly.  I’m sure the following is wrong, but I hope you can see what I’m trying to achieve.</p>
<p>var result = $.data(‘#myElement’,'pluginName’,defaults.mySetting);</p>
<p>Many thanks for a very informative piece.</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=619601#respond" onclick="return addComment.moveForm(&quot;comment-619601&quot;, &quot;619601&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">45</span>
    <div class="comment" id="comment-622568">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/2877c2f552d632b368284a11d76f88b7" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">libertux</h3> 
        		<span class="datetime"><a title="Commentlink #45" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-622568">November 30th, 2012 11:04 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi,<br>
Great work it’s so helpfull. I’m using your first skeleton (A Lightweight Start) but i have a problem, I’cant use :</p>
<p>[code]<br>
.....<br>
   Plugin.prototype.init = function () {<br>
        // code goes here<br>
        var el = this.element;<br>
        el.find('.classname').each(function(){<br>
            alert('test');<br>
        });<br>
    };<br>
....<br>
[/code]</p>
<p>but i have this error :</p>
<p>[code]<br>
TypeError: el.find is not a function<br>
[Stopper sur une erreur]<br>
el.find('.classname').each(function(){<br>
[/code]</p>
<p>can some one help? THANKS</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=622568#respond" onclick="return addComment.moveForm(&quot;comment-622568&quot;, &quot;622568&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">46</span>
    <div class="comment" id="comment-624371">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ee5e7f7e1b4bf1aef645c39e3233523b" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Martin Vézina</h3> 
        		<span class="datetime"><a title="Commentlink #46" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-624371">December 19th, 2012 7:13 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Hi Addy,</p>
<p>Thank you for this excellent mashup of the main techniques for plugin development. It is very useful.</p>
<p>I used some of the techniques described above to address a situation where I needed a semi-defined plugin, much like an abstract class in classical OOP. The concrete plugin could not be generalized and was to be extended each time a concrete implementation was needed. I thought it might be interesting to some as it solves a problem that is not completely answered by the patterns you describe. You can read about it in this article : <a href="http://lab.la-grange.ca/en/a-pattern-for-abstract-jquery-plugins" rel="nofollow">http://lab.la-grange.ca/en/a-pattern-for-abstract-jquery-plugins</a></p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=624371#respond" onclick="return addComment.moveForm(&quot;comment-624371&quot;, &quot;624371&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">47</span>
    <div class="comment" id="comment-635312">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/2bceb2634f6ace80e3c419d27d5b1621" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">tkane2000</h3> 
        		<span class="datetime"><a title="Commentlink #47" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-635312">February 18th, 2013 1:09 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Good stuff, thanks!  Quick question about the lightweight pattern:</p>
<p>The ‘Plugin’ function references the ‘default’ property of it’s parent function.  Would that cause a circular reference and thereby a memory leak?</p>
<p>I’m referencing this article which is a bit out of date:<br>
<a href="http://www.ibm.com/developerworks/web/library/wa-memleak/" rel="nofollow">http://www.ibm.com/developerworks/web/library/wa-memleak/</a><br>
but I’m also using the pattern and getting a minor memory leak every time I call the plugin.</p>
<p>Thanks!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=635312#respond" onclick="return addComment.moveForm(&quot;comment-635312&quot;, &quot;635312&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">48</span>
    <div class="comment" id="comment-638787">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/6819c7d9e09bc1e77506d9456d0a4e40" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Brianna Deleasa</h3> 
        		<span class="datetime"><a title="Commentlink #48" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-638787">March 2nd, 2013 6:37 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Thank you for the in-depth article! I’ve been trying to create my first simple jQuery plugins, and this helped point me in the right direction.  I’ve got a lot of good techniques to follow and plenty of examples to reference.  Thanks!</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=638787#respond" onclick="return addComment.moveForm(&quot;comment-638787&quot;, &quot;638787&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
<li class="comment even thread-even depth-1 clearfix ">
    <span class="commentnumber">49</span>
    <div class="comment" id="comment-642502">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/af58a7ddb954af741546d7179a573d81" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ayesha Mahmood</h3> 
        		<span class="datetime"><a title="Commentlink #49" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-642502">March 7th, 2013 11:22 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>I have a question. Is there a way you can check if the plugin was initialized on any element within the plugin code? I don’t want to loop over all elements in the DOM to check that and I don’t want a global variable to check that. Is there another way?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=642502#respond" onclick="return addComment.moveForm(&quot;comment-642502&quot;, &quot;642502&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            <ul class="children">
<li class="comment odd alt depth-2 clearfix ">
    <span class="commentnumber">50</span>
    <div class="comment" id="comment-643392">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/669a102e1f06264963e9e2b1002c55e3" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Ayesha Mahmood</h3> 
        		<span class="datetime"><a title="Commentlink #50" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-643392">March 8th, 2013 2:54 pm</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>In addition to my question. I want a global variables within the plugin scope that is available to all plugin initializations. Is that possible?</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=643392#respond" onclick="return addComment.moveForm(&quot;comment-643392&quot;, &quot;643392&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
    <span class="commentnumber">51</span>
    <div class="comment" id="comment-665133">
        <div class="comment-author">
		<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/6b5b89f494e2ddaa6cf74787ebcfe0f1" class="avatar avatar-38 photo">        	<div class="authormeta">
       			<h3 class="comment-author">Dileep</h3> 
        		<span class="datetime"><a title="Commentlink #51" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-665133">April 10th, 2013 1:04 am</a></span>            
        	</div>
        </div>
        <div class="comment-text">
        	<p>Dear, Sir,</p>
<p>  I have used the File Input control, with this theame. And i need a Javascript code for clear the File input control.. How to use it…??</p>
<p>Please help me…</p>
<p>Thanks and Regards,</p>
<p>Dileep</p>
        </div>
        <div class="commentmeta">
            <div class="reply">
                        <a class="comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/?replytocom=665133#respond" onclick="return addComment.moveForm(&quot;comment-665133&quot;, &quot;665133&quot;, &quot;respond&quot;, &quot;115389&quot;)">Reply</a>            </div>
                            	        	<div class="commentrating clearfix">
        		        		        	</div>
        	        </div>
    </div>
            </li>
        </ol>
                        </div>
		    <div id="best-comments" style="display: none;">
			<ol id="ratedcomments-overview" class="commentlist">
					<li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">1</span>
			<div class="comment" id="bestcomment-550347">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/2f2c0f30424ba20b3315ec05d177d493" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Burak Erdem</h3> 
					<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550347">October 11th, 2011 5:47 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>One of the most descriptive articles I’ve ever read about jQuery and plugin patterns. Thank you…</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+30</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">2</span>
			<div class="comment" id="bestcomment-550371">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5a39b8e048d7ca23ba3e43110975bd4a" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">David Corbacho</h3> 
					<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550371">October 11th, 2011 11:14 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Addy, this is not an article, this should be a book’s chapter. Good content</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+10</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">3</span>
			<div class="comment" id="bestcomment-550353">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550353">October 11th, 2011 6:48 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>It’s my pleasure! I hope this post comes in useful :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+9</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">4</span>
			<div class="comment" id="bestcomment-550355">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/316af5a02714c7a6c1e64666f45b09d8" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ralph</h3> 
					<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550355">October 11th, 2011 7:02 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>OMG… that’s one massive lengthy article. Not that I understood much of it :) (js/jQuery sill looks scary to me) but I think it’s just great that people take the time to put such detailed article together for others to learn. Thumbs up!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+5</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">5</span>
			<div class="comment" id="bestcomment-550445">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550445">October 12th, 2011 5:19 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Thanks.</p>
<p>The great thing about JavaScript is that it enables you to keep the structures you use as modules or plugins as complex or as simple as you’d like. It’s true that there are a ton of ways you could be doing any of the above, but rather than expecting a developer to learn these off, I would just say..find one that seems to fit what you’re after and go with it. If it doesn’t work out, try something else. </p>
<p>There isn’t a solid ETA on my O’Reilly book just yet, but we’ll probably target summer 2012 or before then for something that’s finalized. Hope that helps!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+4</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">6</span>
			<div class="comment" id="bestcomment-550352">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5c4a839c1766f8160f9b3792eac22e53" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Thomas Strobl</h3> 
					<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550352">October 11th, 2011 6:46 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Very detailed and very useful. Thank you!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+4</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">7</span>
			<div class="comment" id="bestcomment-550356">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/55f0869695ac25255772583e9e1ec78a" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Nick Mason</h3> 
					<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550356">October 11th, 2011 7:11 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Extremely well done article. Thanks for the posting &amp; insight.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">8</span>
			<div class="comment" id="bestcomment-551457">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b11cec1c466bb0f8149ee8cd38cf2d90" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Gary</h3> 
					<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551457">October 20th, 2011 7:52 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great job, as always, Addy. I learn so much from reading your articles, and realize how much more I need to learn (not so happy about that!).</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">9</span>
			<div class="comment" id="bestcomment-550391">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/39570a104ac68d796a44fa9423c14f3e" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Andres Valencia</h3> 
					<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550391">October 11th, 2011 2:11 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Thanks Addy, badass article!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">10</span>
			<div class="comment" id="bestcomment-550552">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/e474bf34ede6eb79e14fcfc79adc0375" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">balanza</h3> 
					<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550552">October 12th, 2011 3:15 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>addy osmani…. this guy is a code-machine!</p>
<p>thumb up</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">11</span>
			<div class="comment" id="bestcomment-550564">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b28d62703b9048a618e980ba69369460" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Sam</h3> 
					<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550564">October 12th, 2011 6:36 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Nice work Addy!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+3</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">12</span>
			<div class="comment" id="bestcomment-551293">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/83fb3b9514546bc23f21cd215231f62e" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Tyler Mulligan</h3> 
					<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551293">October 19th, 2011 9:31 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great article.  I love that you went more in-depth with these. I found the rewrite on <a href="http://www.jqueryboilerplate.com/" rel="nofollow">http://www.jqueryboilerplate.com</a> the other day and was curious to know more. Thanks for explaining.  However, it was a bit off-putting that you didn’t include usage examples.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">13</span>
			<div class="comment" id="bestcomment-550918">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/25a1cbed2e4e537d811c0571bfc9fc8d" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Jason</h3> 
					<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550918">October 16th, 2011 3:46 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>very nice…THX</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">14</span>
			<div class="comment" id="bestcomment-550426">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/e1852bbca35effbadad683dfc990659c" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">CEA</h3> 
					<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550426">October 12th, 2011 12:34 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Cheers for this post which is extremly usefull</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">15</span>
			<div class="comment" id="bestcomment-550433">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/187a98804b9bc8a62fcffa3e7300f150" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">mikaweb</h3> 
					<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550433">October 12th, 2011 2:13 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Brilliant!<br>
Well documented, it’s gonna help me a lot.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">16</span>
			<div class="comment" id="bestcomment-550366">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/10ad57ef06737f2e10a454826554fb6b" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Christian</h3> 
					<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550366">October 11th, 2011 9:39 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wow !!  Great ! </p>
<p>Need to be read again oin order to be well understood, but it’s a great Article …</p>
<p>How it seems easy to build a jquery plugin !! ;)</p>
<p>Congrats.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">17</span>
			<div class="comment" id="bestcomment-550374">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/0ff9c3a23e73d87375f89ab6ccf62e31" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Geert-Jan Brits</h3> 
					<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550374">October 11th, 2011 12:00 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Really thorough piece! Breath of fresh air, where it seems popular nowadays to only post ‘soundsbite’ pieces. Particularly liked your reasoning behind the patterns, instead of just showing the end result, as well as the way in which patterns are gradually introduced and build upon.  In short: bookmarked!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">18</span>
			<div class="comment" id="bestcomment-550375">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7ea5bce168f688e532f705e2f20c54f1" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Mike Petrovich</h3> 
					<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550375">October 11th, 2011 12:04 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wonderfully informative article! “Brilliant newcomer” indeed :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">19</span>
			<div class="comment" id="bestcomment-550403">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/38f89c46ae31ab1ed90c5b662385fe12" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ahmed El Sokkary</h3> 
					<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550403">October 11th, 2011 6:28 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Very useful, I don’t think there is an article I read before which covered jQuery plugins that way, thanks again and again :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">20</span>
			<div class="comment" id="bestcomment-550412">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/62eb687d6d74d8834935a2336eb465b2" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">erminio ottone</h3> 
					<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550412">October 11th, 2011 7:02 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>That’s what i hate about js: we need to know too many pattern for doing stuff. </p>
<p>btw, i love addy’s articles, maybe verbose some time but i think they are the best modern js resource on the web. Looking forward for you o’reilly book! when it will be out?</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">21</span>
			<div class="comment" id="bestcomment-550547">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7d00dc7bc83cb8fd9bb502db7d4eda30" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Finn</h3> 
					<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550547">October 12th, 2011 2:19 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Wow, I thought I would know how to develop a jQuery plugin – but now I know that I don’t know anything… ;)</p>
<p>Thanks, well done!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">22</span>
			<div class="comment" id="bestcomment-550579">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550579">October 12th, 2011 8:14 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>You are all very welcome :) Please do feel free to let me know if you’re uncertain about anything in the post and I’ll happily expand on it.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+2</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">23</span>
			<div class="comment" id="bestcomment-551620">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy</h3> 
					<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-551620">October 21st, 2011 12:13 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Hey Cory. If you 100% aren’t planning on using references to window or document in your plugin, you don’t need to pass those. They’re really just there as a demonstration of best practices for those that do need to.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">24</span>
			<div class="comment" id="bestcomment-550360">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/5ed4a08270923c8c04d0736490e34271" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Ankit Singhal</h3> 
					<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550360">October 11th, 2011 7:37 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Great article… well described.</p>
<p>Thank you.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">25</span>
			<div class="comment" id="bestcomment-550358">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/85b55e2947ea2e426de6294a88c29c36" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">djheru</h3> 
					<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550358">October 11th, 2011 7:30 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Excellent writing, useful examples, and the perfect blend of basic and advanced content. This is one of the best online tutorials I’ve read in a long time, and I read a lot of them. You should be working for Lynda or Khan.</p>
<p>I hope to see more from you soon.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">26</span>
			<div class="comment" id="bestcomment-550707">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/654082a9f3c9093064ce4c71990ca15f" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">John Neil</h3> 
					<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550707">October 14th, 2011 4:08 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Really really nice work here and at jQuery Boilerplate!</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">27</span>
			<div class="comment" id="bestcomment-550733">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/7d8d53be7476d9e29a0aeeba33876f11" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Cory Dorning</h3> 
					<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550733">October 14th, 2011 7:18 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Question…is there a need to pass window and document if your plugin isn’t using them? Seems like doing so would be counter intuitive…thoughts?</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">28</span>
			<div class="comment" id="bestcomment-550765">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/679f62d3c4b019ceaee5fd981638ad85" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Gueno</h3> 
					<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550765">October 14th, 2011 1:31 pm</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Bookmarked ;)<br>
Thank you for this great article !</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment odd alt thread-even depth-1 clearfix ">
			<span class="commentnumber">29</span>
			<div class="comment" id="bestcomment-550372">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/96270e4c3e5e9806cf7245475c00b275(1)" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Addy Osmani</h3> 
					<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550372">October 11th, 2011 11:17 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>You are too kind :) Some of this may well end up in the JavaScript design patterns book I’m working on for O’Reilly at the moment. I’m just glad if it comes in helpful with anyone else’s projects for now.</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
				</li><li class="comment even thread-odd thread-alt depth-1 clearfix ">
			<span class="commentnumber">30</span>
			<div class="comment" id="bestcomment-550500">
			<div class="comment-author">
				<img alt="" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/b73f3f00543952478ad7947f31d5e7d7" class="avatar avatar-38 photo">								
				<div class="authormeta">
					<h3 class="comment-author">Marco Barbosa</h3> 
					<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#comment-550500">October 12th, 2011 7:44 am</a></span>
				</div>
			</div>
			<div class="comment-text">
				<p>Agreed. This was an excellent book chapter reading :)</p>
			</div>
			<div class="commentmeta">
									<div class="commentrating clearfix">
						<div class="rateresult positive">+1</div>
					</div>
											</div>
		</div>
					</li></ol>
				    </div>
	</div>


<div id="respond">

    <h3>Leave a Comment</h3>

    <p class="desc">Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and <code>rel="nofollow"</code> is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!</p>

        
            <a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#respond" style="display:none;">Click here to cancel reply.</a>								<div id="respond">
				<h3 id="reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#respond" style="display:none;">Click here to cancel reply.</a></small></h3>
									<form action="http://coding.smashingmagazine.com/wp-comments-post.php" method="post" id="commentform">
																										<div class="clearfix"><p class="input-half"><label for="comment_author">Your name<span class="required">*</span></label><input type="text" name="author" id="comment_author" value="" tabindex="1" class="input"></p>
<p class="input-half"><label for="email">Your email<span class="required">*</span></label><input type="text" name="email" id="email" value="" tabindex="2" class="input"></p></div>
<input type="text" name="2063dawebsite" id="2063dawebsite" value="" class="_hidden hide">
												<div id="message-box"><div class="cancel-comment-reply right"><small></small></div><label for="comment">Your message<span class="required">*</span></label><textarea name="comment" id="comment" rows="10" tabindex="4" class="input textarea"></textarea></div>												<p class="form-submit">
							<input name="submit" type="submit" id="submit" value="Submit Comment">
							<input type="hidden" name="comment_post_ID" value="115389" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
						</p>
						<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="00599a34ad"></p>					</form>
							</div><!-- #respond -->
						
        
</div>


</div><!-- .col.main -->								
</div><!-- .grid -->
<p><a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/#top" class="backtotop" title="Jump to the top of the page">↑ Back to top</a></p>
</div><!-- .fluid -->
</div><!-- #container -->
	<div id="wpsidebar">
		
    <div class="col side">
			
      <div class="sm-search wp-search-form">			
				
        <form method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
					<label for="magazine-search">Search on Smashing Magazine</label>
					<input id="magazine-search" name="q" type="text" placeholder="e.g. Responsive design">
					<button class="search_submit" type="submit">Search</button>
					<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
					<input type="hidden" name="cof" value="FORID:10">
					<input type="hidden" name="ie" value="UTF-8">
				</form>
        
			</div>
			
      <div class="ed spnsrlistwrapper">

					  			<span class="declare">Advertisement</span>
	  			<span class="awithus"><a href="mailto:advertising@smashingmagazine.com" title="Advertise with us!" class="sprite ed-us">Advertise with us!</a></span>

        <div id="spnsr_list">
          <script type="text/javascript">ads_showspnrslist();</script><ul id="spnsrlist" class="bnnr-list"><li class="double"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6195__zoneid=77__OXLCA=1__cb=1b07cfaf07__oadest=http%3A%2F%2Fwww.sitefinity.com%2Fcampaigns%2Fsandbox%2Fdrag-and-drop-responsive-grid%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmmag_grid" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(1).php" alt="Drag &amp; Drop Responsive Grid" title="Drag &amp; Drop Responsive Grid" border="0"></a><div id="beacon_1b07cfaf07" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(2).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6144__zoneid=24__OXLCA=1__cb=52e3aaded5__oadest=http%3A%2F%2Fwww.tidysurveys.com" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(2).php" alt="Create Your Survey in Minutes" title="Create Your Survey in Minutes" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6144__zoneid=24__OXLCA=1__cb=52e3aaded5__oadest=http%3A%2F%2Fwww.tidysurveys.com" target="_blank">Create Your Survey in Minutes</a><div id="beacon_52e3aaded5" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(3).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6175__zoneid=24__OXLCA=1__cb=50e68f593d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(3).php" alt="Sign Up for Free!" title="Sign Up for Free!" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6175__zoneid=24__OXLCA=1__cb=50e68f593d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sponsor%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank">Sign Up for Free!</a><div id="beacon_50e68f593d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(4).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><script type="text/javascript">/* <![CDATA[ */
OA_show = function (name) {
var debug = false;
if (window.location.hash == "#debug")
debug = true;
var element_hooks = {
"Sidebar 1": "wpsidebar",
"Sidebar 2": "wpsidebar",
"Sidebar 3": "wpsidebar",
"Sidebar Special": "wpsidebar",
"Medium Rectangle": "cad"
};
if (typeof(OA_output[name]) == 'undefined') {
return;
} else {
var hidden = false;
if (debug) console.log('Outputting '+name);
if (typeof element_hooks[name] !== 'undefined') {
var element = document.getElementById(element_hooks[name]);
if (element) {
var element_visible = true; // default
/*var element_display = element.currentStyle ? element.currentStyle.display : getComputedStyle(element, null).display;
if (element_display == 'none')
element_visible = false;*/
if (!(element.offsetWidth > 0) && !(element.offsetHeight > 0))
element_visible = false;
if (!element_visible) {
if (debug) console.log(element_hooks[name]+' not visible, extracting beacon');
extract_beacon(name);
}
}
}
document.write(OA_output[name]);
}
}
// In dieses Array werden die Impression-Logging-Beacons gespeichert
var OA_beacons = {};
/** Entfernt das OpenX-Impression-Logging-Beacon aus einem Banner in OA_output
*  und speichert es in der globalen Variable OA_beacons.
**/
function extract_beacon(name) {
if (OA_output[name] == undefined)
return;
var pos = OA_output[name].search(/\<div id\=\'beacon_[a-z0-9]+\'.*\<\/div\>\s*/);
if (pos != -1) {
OA_beacons[name] = OA_output[name].substr(pos);
OA_output[name] = OA_output[name].substring(0, pos);
}
}
/* ]]> */</script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=e47866baeb__oadest=http%3A%2F%2Fw3-markup.com" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(4).php" alt="PSD to HTML" title="PSD to HTML" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=e47866baeb__oadest=http%3A%2F%2Fw3-markup.com" target="_blank">PSD to HTML</a><div id="beacon_e47866baeb" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(5).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=de04e05ecd__oadest=http%3A%2F%2Fwww.zoomyimages.com" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(5).php" alt="Quality Stock Images &amp; Music" title="Quality Stock Images &amp; Music" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5891__zoneid=24__OXLCA=1__cb=de04e05ecd__oadest=http%3A%2F%2Fwww.zoomyimages.com" target="_blank">Quality Stock Images &amp; Music</a><div id="beacon_de04e05ecd" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(6).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li class="double"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6016__zoneid=77__OXLCA=1__cb=fcea574744__oadest=http%3A%2F%2Fwww.squarespace.com%2F%3Fchannel%3Ddisplay%26subchannel%3Dsmashing" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(6).php" alt="" title="" border="0"></a><div id="beacon_fcea574744" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(7).php" alt="" style="width: 0px; height: 0px;"></div>
</li><li><script src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/adServer.bs"></script><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/img" style="position:absolute;left:0px;top:0px;"><script src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/StdBanner.js"></script><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/e4e442ee-98b0-4eea-97e6-79fe9ca28e8c.jpg" id="ebStdBanner0" title="" onclick="gEbStdBanners[0].handleInteraction()" style="cursor:pointer;cursor:hand;">
<noscript>
&lt;a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5982__zoneid=24__OXLCA=1__cb=828d51d041__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080755%26Page%3D%26PluID%3D0%26Pos%3D9258" target="_blank"&gt;&lt;img src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?cn=bsr&amp;FlightID=6080755&amp;Page=&amp;PluID=0&amp;Pos=9258" border=0 width=200 height=125&gt;&lt;/a&gt;
</noscript>
<br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5982__zoneid=24__OXLCA=1__cb=828d51d041__oadest=http%3A%2F%2Fbs.serving-sys.com%2FBurstingPipe%2FadServer.bs%3Fcn%3Dbrd%26FlightID%3D6080749%26Page%3D%26PluID%3D0%26Pos%3D6429" target="_blank">Create free stunning sites!</a><div id="beacon_828d51d041" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(8).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6193__zoneid=24__OXLCA=1__cb=b95806c9da__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(7).php" alt="Online Project Management" title="Online Project Management" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6193__zoneid=24__OXLCA=1__cb=b95806c9da__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html" target="_blank">Online Project Management</a><div id="beacon_b95806c9da" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(9).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6187__zoneid=24__OXLCA=1__cb=18c0deeec2__oadest=http%3A%2F%2Fwww.vectorstock.com%2Froyalty-free-vectors%3FSM%3D2" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(8).php" alt="Free + Royalty Free Vector Art" title="Free + Royalty Free Vector Art" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6187__zoneid=24__OXLCA=1__cb=18c0deeec2__oadest=http%3A%2F%2Fwww.vectorstock.com%2Froyalty-free-vectors%3FSM%3D2" target="_blank">Free + Royalty Free Vector Art</a><div id="beacon_18c0deeec2" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(10).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6135__zoneid=24__OXLCA=1__cb=a06ff4ae85__oadest=http%3A%2F%2Fwww.Bugherd.com%2F%3Futm_source%3DSmashingMag%26utm_medium%3Dbanner%26utm_content%3Dad2%26utm_campaign%3Dsmashing" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(9).php" alt="BugHerd == Happy Clients" title="BugHerd == Happy Clients" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6135__zoneid=24__OXLCA=1__cb=a06ff4ae85__oadest=http%3A%2F%2Fwww.Bugherd.com%2F%3Futm_source%3DSmashingMag%26utm_medium%3Dbanner%26utm_content%3Dad2%26utm_campaign%3Dsmashing" target="_blank">BugHerd == Happy Clients</a><div id="beacon_a06ff4ae85" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(11).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=766872f1dd__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(10).php" alt="Premium Web Templates" title="Premium Web Templates" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=766872f1dd__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm" target="_blank">Premium Web Templates</a><div id="beacon_766872f1dd" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(12).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=98e2487ad8__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(11).php" alt="" title="" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=98e2487ad8__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank">PSD to HTML5/CSS3</a><div id="beacon_98e2487ad8" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(13).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=ca51c5fa59__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(12).php" alt="Web fonts with Typekit" title="Web fonts with Typekit" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5182__zoneid=24__OXLCA=1__cb=ca51c5fa59__oadest=http%3A%2F%2Fwww.typekit.com%2F%3Futm_source%3Dsmashingmagazine%26utm_medium%3DDisplay%26utm_content%3Dshwf120515%26utm_campaign%3DGeneral" target="_blank">Web fonts with Typekit</a><div id="beacon_ca51c5fa59" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(14).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5976__zoneid=24__OXLCA=1__cb=f41da9094b__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fsmashingmag%2F%3Fref%3D9823%26utm_source%3Ddirect%26utm_medium%3Dbanner%26utm_content%3D200x125-static-tryitfree%26utm_campaign%3Dsmashingmag" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(13).php" alt="Invoice like a pro" title="Invoice like a pro" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5976__zoneid=24__OXLCA=1__cb=f41da9094b__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fsmashingmag%2F%3Fref%3D9823%26utm_source%3Ddirect%26utm_medium%3Dbanner%26utm_content%3D200x125-static-tryitfree%26utm_campaign%3Dsmashingmag" target="_blank">Invoice like a pro</a><div id="beacon_f41da9094b" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(15).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6147__zoneid=24__OXLCA=1__cb=b4006cea02__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(14).php" alt="Custom Stickers" title="Custom Stickers" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6147__zoneid=24__OXLCA=1__cb=b4006cea02__oadest=http%3A%2F%2Fwww.stickermule.com%3Futm_campaign%3DSmashing_Branded%26utm_medium%3DBanner%26utm_source%3DSmashing_Mag" target="_blank">Custom Stickers</a><div id="beacon_b4006cea02" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(16).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=1dbc205a5e__oadest=http%3A%2F%2Fwww.psd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(15).php" alt="PSD2HTML.com" title="PSD2HTML.com" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5753__zoneid=24__OXLCA=1__cb=1dbc205a5e__oadest=http%3A%2F%2Fwww.psd2html.com%2F%3Futm_source%3Dsmashingmagazine.com%26utm_medium%3Dbanner%26utm_campaign%3Dnew-p2h" target="_blank">PSD2HTML.com</a><div id="beacon_1dbc205a5e" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(17).php" alt="" style="width: 0px; height: 0px;"></div><script type="text/javascript">/* <![CDATA[ */
if  (typeof test_arw_already_included === 'undefined' ) {
var test_arw_already_included = true;
jQuery(document).ready(function() {
var sidebar = document.getElementById('wpsidebar');
var sidebar_display = sidebar.currentStyle ? sidebar.currentStyle.display : getComputedStyle(sidebar, null).display;
if (sidebar_display == 'none') {
var counter = jQuery.parseHTML("<!-- count page load without visible sidebar --><a href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?n=a560784c' target='_blank'><img src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/avw.php?zoneid=93&amp;n=a560784c&amp;cb="+Math.random()+"' border='0' alt='' /></a>");
jQuery('#wpsidebar').append(counter);
}
});
}
/* ]]> */</script>
</li></ul>
        </div><!-- /#spnsr_list -->


			</div><!-- /.ed.spnsrlistwrapper -->
			
      <div class="inner">
				
        <div class="sidebartabs">
          
          <div id="jobs" class="smashingwidget">
            
            <h3><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&piwik_kwd=widget" style="border: none;"><span>Smashing Job Board</span><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/sm-jobs.png" alt="Smashing Jobs"></a></h3>
            
            <ul class="topiclist">
              <li style="display:none;"></li>
              <li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/-p58hwils_s/2403524">Web Developer/Designer - FEGS Health and Human Services - (New York City) - FullTime</a><p>Award-winning media/communications department of a major New York City nonprofit social services agency seeks a team player – creative, energetic, professional…</p></li><li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/5XfNzRu32Sk/2403508">Web Designer - IBrand LLC - (Calabasas, CA) - FullTime</a><p>IBrand, LLC is an internet marketing company looking for an experienced Graphic/Web Designer. Ideal candidate will be able to convert original visual design concepts…</p></li>            </ul>
            
            <p class="view-more"><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&piwik_kwd=widget">View more job openings…</a></p>
          </div><!-- /#jobs -->

        </div><!-- /.sidebartabs -->

        <div id="sidebar_special">
          
	        <script type="text/javascript">OA_show('Sidebar Special');</script><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6181__zoneid=72__OXLCA=1__cb=2698524337__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28420x200%29%26utm_medium%3Dbanner%26utm_content%3DLovedByDesigners%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(16).php" alt="" title="" border="0"></a><div id="beacon_2698524337" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(18).php" alt="" style="width: 0px; height: 0px;"></div>

	 
        </div>

			</div><!-- /.inner -->
	    
      <div class="two clearfix">
  			<div class="left">	
          <!--<div id="sidebaredtarget">-->
          
          <div class="sidebar_sky">
		            <script type="text/javascript">OA_show('Sidebar 1');</script><!--<span class="declare">Advertisement</span>-->
<div style="height:20px;"></div><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=6172__zoneid=40__OXLCA=1__cb=7d5d11cb5d__oadest=http%3A%2F%2Fwww.lightcms.com%2Flightcms-for-designers%3Futm_source%3DSmashing%252B%28Sidebar%29%26utm_medium%3Dbanner%26utm_content%3DHTML-Green%26utm_campaign%3DSmashing%26leadsource%3Dlcms_commindo_design" target="_blank" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/ai(17).php" alt="" title="" border="0"></a><div id="beacon_7d5d11cb5d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lg(19).php" alt="" style="width: 0px; height: 0px;"></div>

		          </div><!-- /.ed.sidebared -->
          
          <!-- </div> -->

          <div class="sidebar_sky">
		            <script type="text/javascript">OA_show('Sidebar 2');</script>
		          </div>
        </div><!-- /.left -->
	    </div><!-- /.two -->
			
		</div><!-- .col.ads -->
	</div>

<div id="footer">
<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/footer-smb4-coding-opt.png" alt="Smashing Book #4"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer"><strong>The Smashing Book #4</strong></a><br>Pre-order our brand new Smashing Book #4, available as print and eBook. <a href="https://shop.smashingmagazine.com/smashing-book-4.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/library-footer-image-opt.png" alt="The Smashing Library"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer"><strong>The Smashing Library</strong></a><br>Grab all published and upcoming Smashing eBooks, in one swoop. <a href="https://shop.smashingmagazine.com/smashing-library-complete.html?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<div class="contribute"><div class="product clearfix"><div class="product-image">
<a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer" style="border: none;"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/lea-verou-opt1.jpg" alt="Smashing Workshops"></a>
</div>
<div class="product-description"><p><a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer"><strong>Smashing Workshops</strong></a><br>Join our hands-on full-day workshops, run by experts of the industry. Good stuff. <a href="https://shop.smashingmagazine.com/workshops/?pk_campaign=smashingmagazine-footer">Learn more...</a></p>
</div></div></div>

<p class="statement"><em>With a commitment to quality content for the design community.</em><br><a href="http://www.smashing-media.com/">A Smashing Media Company.</a> Made in Germany. 2006-2013. <a href="http://www.smashingmagazine.com/contact/">Contact Us.</a> <a href="http://www.smashingmagazine.com/about/">Impressum.</a></p>
</div><!-- End of Footer -->

<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/footer.combined.min.js"></script>
<script type="text/javascript" src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/prism.js"></script>

    <script src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/js" type="text/javascript"></script>
    <script type="text/javascript">
        try{ clicky.init(66569468); }catch(e){}
    </script>
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName('script')[0];
a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/1125.js";
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script><!--<script type='text/javascript' async="" src='https://platform.twitter.com/widgets.js'></script>--><div id="goog-gt-tt" class="skiptranslate" dir="ltr"><div style="padding: 8px;"><div><div class="logo"><img src="./translator Essential jQuery Plugin Patterns   Smashing Coding_files/translate-32.png" width="20" height="20"></div></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">Texto original</h1></div><div class="middle" style="padding: 8px;"><div class="original-text"></div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">Sugira uma tradução melhor</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none;"></div></div>


</body></html>